[原]webpack 升级 4.25
1. package 的内容
"devDependencies": { "babel-cli": "^6.26.0", "babel-core": "^6.26.0", "babel-loader": "^7.1.2", "babel-plugin-import": "1.6.2", "babel-plugin-transform-decorators-legacy": "^1.3.4", "babel-plugin-transform-object-rest-spread": "^6.26.0", "babel-polyfill": "^6.26.0", "babel-preset-env": "^1.6.0", "babel-preset-es2015": "6.24.1", "babel-preset-react": "^6.24.1", "babel-preset-react-app": "^3.1.0", "babel-preset-stage-2": "6.24.1", "chalk": "^2.3.0", "chokidar": "^1.7.0", "copy-webpack-plugin": "^4.0.1", "css-hot-loader": "^1.3.1", "css-loader": "^0.28.7", "extract-text-webpack-plugin": "3.0.2", "mini-css-extract-plugin": "^0.4.4", "file-loader": "2.0.0", "fs": "0.0.1-security", "html-loader": "^0.5.1", "html-webpack-plugin": "3.2.0", "json-server": "^0.12.1", "less": "^2.7.3", "less-loader": "^4.0.5", "node-sass": "^4.5.3", "rimraf": "^2.6.1", "sass-loader": "^6.0.6", "server-destroy": "^1.0.1", "source-list-map": "^2.0.0", "style-loader": "^0.18.2", "uglify-js": "^3.0.28", "url-loader": "^0.5.9", "webpack": "4.25.1", "webpack-dev-server": "^3.1.0", "webpack-cli": "3.1.2" }
2. 如果用了 html-webpack-plugin 要加一个配置, 否则报错 为什么没仔细看..
plugins: [ new webpack.HotModuleReplacementPlugin(), new webpack.NamedModulesPlugin(), // extractCSS, // extractSCSS, new MiniCssExtractPlugin({ // Options similar to the same options in webpackOptions.output // both options are optional filename: devMode ? '[name].css' : '[name].[hash].css', chunkFilename: devMode ? '[id].css' : '[id].[hash].css', }), new HtmlWebpackPlugin( { inject: true, template: './public/index.html', chunksSortMode: 'none' } ), new CopyWebpackPlugin([ { from: './public/img', to: 'public/img' }, // { from: './public/spec.json', to: 'public/spec.json' }, // { from: './public/swagger.json', to: 'public/swagger.json' }, { from: './public', to: 'public' } ], { copyUnmodified: false } ) ]
3. 如果用了 extract-text-webpack-plugin 换成 mini-css-extract-plugin 比较简单, 类似这样
{ test: /\.css$/, use: [ MiniCssExtractPlugin.loader, "css-loader" ] }, { test: /\.less$/, use: [ MiniCssExtractPlugin.loader, "css-loader", { loader: "less-loader", options: { modifyVars: theme } // no need to JSON.stringify() }, ] }, { test: /\.scss$/, use: [ "css-hot-loader", MiniCssExtractPlugin.loader, { loader: 'css-loader', options: { alias: { '../img': '../public/img' }, module: false } } , "sass-loader", ] },