189 8069 5689
这篇文章给大家分享的是有关webpack4如何迁移的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。
10年积累的网站制作、成都网站制作经验，可以快速应对客户对网站的新想法和需求。提供各种问题对应的解决方案。让选择我们的客户得到更好、更有力的网络服务。我虽然不认识你，你也不认识我。但先做网站后付款的网站建设流程，更有息县免费网站建设让你可以放心的选择与我们合作。
1.x到2.x
这次升级跨度比较大，我们是从webpack1.x升级到4.x，因为1.x与2.x相差挺大，所以第一件事，就是先升到2.x，比较大的改动就是loader的配置方式
// 1.x
preLoaders: [
{
test: /\.vue$/,
loader: 'eslint',
exclude: /node_modules/
}, {
test: /\.js$/,
loader: 'eslint',
exclude: /node_modules/
}
],
loaders: [
{ test: /\.vue$/, loader: 'vue' },
{ test: /\.json$/, loader: 'json' },
{ test: /\.html$/, loader: 'html' },
...
]
//2.x
module: {
rules: [
{
test: /.vue$/,
use: 'eslint-loader',
enforce: 'pre', // 对应1.x的preLoaders
exclude: /node_modules/
}, {
test: /.js$/,
use: 'eslint-loader',
enforce: 'pre',
exclude: /node_modules/
},
{ test: /\.vue$/, use: 'vue-loader' },
{ test: /\.json$/, use: 'json-loader' },
{ test: /\.html$/, use: 'html-loader' },
...
]
},而且loader一定要写完整，vue-loader如果只写vue会报错。loader还可以通过options进行配置。
{
loader: 'css-loader',
options: {
autoprefixer: false
}
}旧版的链式调用也用数组替代。
1.x
style!postcss!less
2.x
use: [ "style-loader", "css-loader", "less-loader" ]
webpack2.x默认支持es6的模块，所以在编译时候没有必要将它们先转换CommonJS模块再处理，babel-preset-es2015-webpack已经支持不转换模块中的import和export，只需要设置.babelrc
"presets": [
["es2015", { "modules": false }]
]另外就是插件的升级，运行时哪个插件报错就升级哪个插件，屡试不爽。
2.x到4.x
第一步：版本升级
不再支持node 4，可以直接升级到8.x版本
webpack升级
npm install webpack@4 --save npm install webpack-cli --save // 不要忘记这一点，用来启动webpack的
插件升级，同理，哪个报错就升级哪个，除了html-webpack-plugin用下面的方法升级，原因是作者还未来得及升级
npm i webpack-contrib/html-webpack-plugin --save-dev
extract-text-webpack-plugin只有最新的beta版本才支持，所以npm install extract-text-webpack-plugin@next --save-dev
第二步运行命令中添加 --mode development和--mode production
PS：虽然说webpack 4是零配置，入口默认是src/index.js，出口是dist/，但由于项目是多页面的，所以这一步并没有省略，根据实际情况来。
第三步移除CommonsChunkPlugin
//替代方案
module: {
rules: [
...
]
},
optimization: {
splitChunks: {
chunks: "all", // 必须三选一：'initial' | 'all' | 'async'
minSize: 0,
minChunks: 1,
maxAsyncRequests: 1,
maxInitialRequests: 1,
name: () => {},
cacheGroups: {
vendor: {
chunks: 'all',
test: /node_modules/, // 正则规则验证，如果符合就提取chunks
name: "vendor" // 要缓存的分割出来的chunk名称
},
default: {
chunks: 'all',
name: 'commons',
reuseExistingChunks: true
}
}
}
}因为多个页面，所以结合了html-webpack-plugin
new HtmlWebpackPlugin({
template: 'index.html',
chunks: ['vendor', 'commons', 'index']
})刚开始一直出错，是因为我没有复写default，也没有default:false，所以其实默认配置有将所有的模块的公共部分分离到某个文件中，但我在HtmlWebpackPlugin中的chunks中又没有添加，所以要么覆写原来的默认配置，要么就关闭默认配置。
第四步：配置postcss autoprefixer
在根目录下创建一个文件`postcss.config.js`
module.exports = {
plugins: [
require('postcss-inline-svg')({
removeFill: false
}),
require('postcss-pxtorem')({
replace: process.env.NODE_ENV === 'production',
rootValue: 750 / 16,
minPixelValue: 1.1,
propWhiteList: [],
unitPrecision: 5
}),
require('autoprefixer')({browsers: ['iOS>7', 'Android>4']})
]
};
...
{
test: /\.(css|less)$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use:[{
loader: 'css-loader',
options: {
autoprefixer: false
}
},
{
loader: 'postcss-loader',
options: {
sourceMap: true
}
},
{
loader: 'less-loader',
options: {
relativeUrls: true
}
}]
})
},
...第五步：不需要UglifyJsPlugin插件
只需要设置optimization.minimize: true就行，production mode下面自动为true
以上只是在原有项目的基础上对webpack 4的升级，还有一些特性并没有用到，所以没有提及，比如sideEffects、javascript/auto javascript/esm javascript/dynamic、webassembly/experimental等等，有机会再去探索。
感谢各位的阅读！关于“webpack4如何迁移”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！