keep the version consistent. Documents! Webpack3.5.5
document address http://www.css88.com/doc/webp.
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
let WEBPACK_ENV = process.env.WEBPACK_ENV || 'dev';
console.log(WEBPACK_ENV);
module.exports = {
entry: './src/app.jsx',
output: {
path: path.resolve(__dirname, 'dist'),
publicPath: '/dist/',
// publicPath: WEBPACK_ENV === 'dev'
// ? '/dist/' : '//s.jianliwu.com/admin-v2-fe/dist/',
filename: 'js/app.js'
},
resolve: {
alias : {
page : path.resolve(__dirname, 'src/page'),
component : path.resolve(__dirname, 'src/component'),
util : path.resolve(__dirname, 'src/util'),
service : path.resolve(__dirname, 'src/service')
}
},
module: {
rules: [
// react(jsx)
{
test: /\.jsx$/,
exclude: /(node_modules)/,
use: {
loader: 'babel-loader',
options: {
presets: ['env', 'react', 'es2015']
}
}
},
// css
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: "css-loader"
})
},
// sass
{
test: /\.scss$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: ['css-loader', 'sass-loader']
})
},
//
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'url-loader',
options: {
limit: 8192,
name: 'resource/[name].[ext]'
}
}
]
},
//
{
test: /\.(eot|svg|ttf|woff|woff2|otf)$/,
use: [
{
loader: 'url-loader',
options: {
limit: 8192,
name: 'resource/[name].[ext]'
}
}
]
}
]
},
plugins: [
// html
new HtmlWebpackPlugin({
template: './src/index.html',
favicon: './favicon.ico'
}),
// css
new ExtractTextPlugin("css/[name].css"),
//
new webpack.optimize.CommonsChunkPlugin({
name : 'common',
filename: 'js/base.js'
})
],
devServer: {
port: 8086,
historyApiFallback: {
index: '/dist/index.html'
},
// proxy : {
// '/manage' : {
// target: 'http://admintest.happymmall.com',
// changeOrigin : true
// },
// '/user/logout.do' : {
// target: 'http://admintest.happymmall.com',
// changeOrigin : true
// }
// }
}
};
package.json
{
"name": "admin-v2-fe",
"version": "1.0.0",
"main": "index.js",
"repository": "https://github.com/yyccQQu/0511.git",
"author": "yyccQQu <643929860@qq.com>",
"license": "MIT",
"scripts": {
"dev": "node_modules/.bin/webpack-dev-server",
"dist": "WEBPACK_ENV=online node_modules/.bin/webpack -p",
"dist_win": "set WEBPACK_ENV=online&& node_modules/.bin/webpack -p"
},
"dependencies": {
"font-awesome": "^4.7.0",
"hogan": "^1.0.2",
"react": "^16.3.2",
"react-dom": "^16.3.2",
"react-router-dom": "^4.2.2",
"react-scripts": "1.1.4",
"webpack": "3.5.5",
"webpack-dev-server": "2.8.2"
},
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^7.1.4",
"babel-plugin-syntax-jsx": "^6.18.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"css-loader": "^0.28.11",
"extract-text-webpack-plugin": "^3.0.2",
"file-loader": "^1.1.11",
"font-awesome": "^4.7.0",
"hogan": "^1.0.2",
"html-loader": "^0.5.5",
"html-webpack-plugin": "^3.2.0",
"style-loader": "^0.21.0",
"url-loader": "^1.0.1"
}
}
you can use create-react-app
to create react
projects.
this problem is caused by the mismatch between the version of babel-loader
and the configuration.