脚本宝典收集整理的这篇文章主要介绍了Webpack 迁移到V4版本指南，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。
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
以上是脚本宝典为你收集整理的Webpack 迁移到V4版本指南全部内容，希望文章能够帮你解决Webpack 迁移到V4版本指南所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。