Webpack 迁移到V4版本指南
需要升级的npm库列表
- "webpack": "^4.6.0",
- "webpack-cli": "^2.0.15",
- "webpack-dev-middleware": "^3.1.2",
- "webpack-hot-middleware": "^2.22.1",
- "file-loader": "^1.1.11",
- "url-loader": "^1.0.1",
- "html-webpack-plugin": "^3.2.0",
- "less": "^3.0.4",
- "less-loader": "^4.1.0",
webpack.config.js 调整
module 配置调整
module.loaders 变成 module.rules
module: {
loaders: [
{
test: /\.css$/,
loader: 'style!css',
},
]
}
// change
// 注意新版本的loader不能省略,即:style-loader 不能写成 style
module: {
rules: [
{
test: /\.css$/,
use: [
{loader: "style-loader"]},
{loader: "css-loader"]},
]
},
]
}
plugins 配置调整
- remove extract-text-webpack-plugin
- remove NoErrorsPlugin
- remove UglifyJsPlugin
- remove DedupePlugin
- remove NamedModulesPlugin
- remove HashedModulesPlugin
- rename webpack.optimize.OccurenceOrderPlugin to webpack.optimize.OccurrenceOrderPlugin
-
remove CommonsChunkPlugin 改用 optimization.runtimeChuck 和 optimization.splitChunks
onfig.optimization = { minimize: true, // runtimeChunk: 'single', // 测试发现这个设置成true或者single首页空白,无任何报错,因此暂时不做设置。 splitChunks: { chunks: 'all', minSize: 30000, minChunks: 1, maxAsyncRequests: 5, maxInitialRequests: 3, automaticNameDelimiter: '~', name: true, cacheGroups: { vendors: { name: 'vendors', test: /[\\/]node_modules[\\/]/, priority: -10, }, default: { minChunks: 2, priority: -20, reuseExistingChunk: true, }, }, }, };
添加 mode
-
开发环境添加
module.exports = { mode: 'development' }
-
生产环境
module.exports = { mode: 'production' }
Code Spliting
Q&A
-
Error: Cannot find module 'webpack/lib/ConcatSource'
解决办法,移除:extract-text-webpack-plugin插件。(这里需要考虑如何抽离CSS)
-
OccurenceOrderPlugin has been renamed to OccurrenceOrderPlugin
解决办法,修改 OccurenceOrderPlugin 成 OccurrenceOrderPlugin
-
ERROR in ./assets/images/icons/search.svg
详细报错信息如下:
ERROR in ./assets/images/icons/search.svg Module build failed: TypeError: Cannot read property 'context' of undefined at Object.loader (/Users/drew/Sites/my-site/node_modules/file-loader/dist/index.js:34:49) @ ./styles.sass 6:40863-40906
解决办法:升级
url-loader
和file-loader
-
Cannot read property 'lessLoader' of undefined
详细报错信息如下:
ERROR in ./src/views/antdemo.less Module build failed: ModuleBuildError: Module build failed: TypeError: Cannot read property 'lessLoader' of undefined at Object.module.exports (/Users/gxz/workspace_js/react-demo/node_modules/less-loader/index.js:50:18) at runLoaders (/Users/gxz/workspace_js/react-demo/node_modules/webpack/lib/NormalModule.js:244:20) at /Users/gxz/workspace_js/react-demo/node_modules/loader-runner/lib/LoaderRunner.js:364:11 at /Users/gxz/workspace_js/react-demo/node_modules/loader-runner/lib/LoaderRunner.js:230:18 at runSyncOrAsync (/Users/gxz/workspace_js/react-demo/node_modules/loader-runner/lib/LoaderRunner.js:143:3) at iterateNormalLoaders (/Users/gxz/workspace_js/react-demo/node_modules/loader-runner/lib/LoaderRunner.js:229:2) at Array.<anonymous> (/Users/gxz/workspace_js/react-demo/node_modules/loader-runner/lib/LoaderRunner.js:202:4) at Storage.finished (/Users/gxz/workspace_js/react-demo/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:43:16) at provider (/Users/gxz/workspace_js/react-demo/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:79:9) at /Users/gxz/workspace_js/react-demo/node_modules/graceful-fs/graceful-fs.js:78:16 at FSReqWrap.readFileAfterClose [as oncomplete] (fs.js:532:3) @ ./src/views/antddemo.js 44:0-25 @ ./src/routes/antd.js @ ./src/routes/index.js
解决办法:升级
less
和less-loader
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。