webpack4升级

本文主要是介绍webpack4升级，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

1、安装webpack-cli、webpack

"webpack": "^4.39.3"

"webpack-cli": "^3.3.7"

npm run dev报错
因为 webpack 和 webpack-dev-server 版本不兼容，升级 "webpack-dev-server": "^3.1.4"
再次启动，报错
因为 html-webpack-plugin 版本不兼容安装 "html-webpack-plugin": "^3.2.0"，再次启动
升级 "vue-loader": "^15.0.10" 再次启动
最新版的 vue-loader 需要加一个新的配置 VueLoaderPlugin
// webpack.dev.conf.js
// 引入
const { VueLoaderPlugin } = require('vue-loader')

// 在下面的插件中加入
plugins: [
new VueLoaderPlugin(),
]

// webpack.prod.conf.js 文件同样
// 引入
const { VueLoaderPlugin } = require('vue-loader')

// 在下面的插件中加入
plugins: [
new VueLoaderPlugin(),
]
再次启动
dev环境升级完成
运行npm run build报错
因为 webpack.optimize.CommonsChunkPlugin 已经被弃用，需要使用新的配置 config.optimization.splitChunk

// webpack.prod.conf.js
// 在 plugins 同级下添加配置
optimization: {
splitChunks: {
cacheGroups: {
vendor: {
test: /[\\/]node_modules[\\/]/,
name: 'vendor',
chunks: 'all'
},
manifest: {
name: 'manifest',
minChunks: Infinity
},
}
},
},
plugins: [...]

// 去掉 plugins 中的这部分代码
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
minChunks (module) {
// any required modules inside node_modules are extracted to vendor
return (
module.resource &&
/\.js$/.test(module.resource) &&
module.resource.indexOf(
path.join(__dirname, '../node_modules')
) === 0
)
}
}),
// extract webpack runtime and module manifest to its own file in order to
// prevent vendor hash from being updated whenever app bundle is updated
new webpack.optimize.CommonsChunkPlugin({
name: 'manifest',
minChunks: Infinity
}),
// This instance extracts shared chunks from code splitted chunks and bundles them
// in a separate chunk, similar to the vendor chunk
// see: https://webpack.js.org/plugins/commons-chunk-plugin/#extra-async-commons-chunk
new webpack.optimize.CommonsChunkPlugin({
name: 'app',
async: 'vendor-async',
children: true,
minChunks: 3
},
再次运行
因为官方已经不推荐使用 extract-text-webpack-plugin 提取 css 样式，可以使用 mini-css-extract-plugin 替代
// 首先安装 mini-css-extract-plugin@0.8.0
// 并且去掉 package.json 中的包 "extract-text-webpack-plugin": "^4.0.0-beta.0",

// webpack.base.conf.js

// 去掉 extract-text-webpack-plugin
// const ExtractTextPlugin = require('extract-text-webpack-plugin')

// 引入
const MiniCssExtractPlugin = require('mini-css-extract-plugin')

// 下面的 generateLoaders 函数更改配置（*中间的为改动部分）
function generateLoaders (loader, loaderOptions) {
const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]

if (loader) {
loaders.push({
loader: loader + '-loader',
options: Object.assign({}, loaderOptions, {
sourceMap: options.sourceMap
})
})
}

// Extract CSS when that option is specified
// (which is the case during production build)
if (options.extract) {

// ********************
// 改动在这里
return [MiniCssExtractPlugin.loader].concat(loaders)
// ********************

} else {
return ['vue-style-loader'].concat(loaders)
}
}

// webpack.prod.conf.js

// 去掉 extract-text-webpack-plugin
// const ExtractTextPlugin = require('extract-text-webpack-plugin')

// 引入
const MiniCssExtractPlugin = require('mini-css-extract-plugin')

// 去掉 plugins 里的配置
new ExtractTextPlugin({
filename: utils.assetsPath('css/[name].[contenthash].css'),
allChunks: true,
}),

// 然后加入新的插件配置
new MiniCssExtractPlugin({
filename: utils.assetsPath('css/[name].[contenthash:12].css'),
allChunks: true,
}),
再次启动
webpack4 需要指定打包的模式 (mode)，指定一下就好，可以在 package.json 的命令中指定，也可以写入配置

// webpack.dev.conf.js
const webpackConfig = merge(baseWebpackConfig, {
mode: 'development',
module: {...}
}

// webpack.prod.conf.js
const webpackConfig = merge(baseWebpackConfig, {
mode: 'production',
module: {...}
}
Cannot assign to read only property 'exports' of object '#' (mix require and export) #4039
.babellrc中添加插件"transform-es2015-modules-commonjs"