vue-cli 项目升级 webpack@4.x 记录。
打算自己写一个 Vue 组件库,通过造轮子的方式来寻找自己的技术盲区。
vue-cli 使用的 2.x 版本,同时使用 vuepress 来写使用文档,期间某些 webpack plugin 由于版本太低而报错,遂升级。升级之后新版本的 webpack plugin 又只能在 webpack@4.x 上使用,所以决定升级 webpack。本文介绍的是从 webpack3 到 webpack4 的升级过程。
使用 webpack4 时,必须保证 Node.js 版本 >= 8.9.4,因为 webpack4 使用了大量的 ES6 语法,这些语法在 nodejs 新版 v8 中得到了原生支持
diff// package.json
"engines": {
+ "node": ">= 8.9.4",
- "node": ">= 6.0.0",
"npm": ">= 3.0.0"
},
包括 webpack、webpack-bundle-analyzer、webpack-dev-server、webpack-merge
注意
注意
webpack4 版本中 cli 工具分离成了 webpack
核心库 与 webpack-cli
命令行工具两个模块,需要使用 CLI
,必须安装 webpack-cli
至项目中。
升级的操作很简单,先删除,再安装即可。
shell// 卸载旧版本 npm uninstall -D webpack webpack-bundle-analyzer webpack-dev-server webpack-merge
shell// 安装新版本 npm install -D webpack webpack-cli webpack-bundle-analyzer webpack-dev-server webpack-merge
包括 copy-webpack-plugin、css-loader、eslint-loader、file-loader、html-webpack-plugin、url-loader、friendly-errors-webpack-plugin、optimize-css-assets-webpack-plugin、uglifyjs-webpack-plugin
shellnpm uninstall -D copy-webpack-plugin css-loader eslint-loader file-loader html-webpack-plugin url-loader friendly-errors-webpack-plugin optimize-css-assets-webpack-plugin uglifyjs-webpack-plugin
shellnpm install -D copy-webpack-plugin css-loader eslint-loader file-loader html-webpack-plugin url-loader friendly-errors-webpack-plugin optimize-css-assets-webpack-plugin uglifyjs-webpack-plugin
CSS 抽取插件 extract-text-webpack-plugin 替换为 mini-css-extract-plugin
npm uninstall -D extract-text-webpack-plugin
npm install -D mini-css-extract-plugin
由于 vue-loader 升级到版本 15 后,配置有较多的变化,稳妥起见,原作者只将 vue-loader 升级到 14.4.2。我在查询了相关文档之后,决定升级到最新版:
npm uninstall -D vue-loader npm install -D vue-loader
下面对配置文件的修改进行详细说明:
Vue Loader v15 需要配合一个 webpack 插件才能正确使用。在webpack.dev.conf.js
、webpack.prod.conf.js
两个文件里面分别添加:
diff+ const VueLoaderPlugin = require('vue-loader/lib/plugin')
const devWebpackConfig = merge(baseWebpackConfig, {
plugins: [
+ new VueLoaderPlugin()
]
})
可参考:vue-loade 官网
增加node:process.env.NODE_ENV
即可
diffmodule.exports = {
+ mode: process.env.NODE_ENV,
将 extract-text-webpack-plugin 替换为 mini-css-extract-plugin
diff+ const MiniCssExtractPlugin = require("mini-css-extract-plugin")
- const ExtractTextPlugin = require('extract-text-webpack-plugin')
if (options.extract) {
+ return [MiniCssExtraPlugin.loader].concat(loaders)
- return ExtractTextPlugin.extract({
- use: loaders,
- fallback: 'vue-style-loader'
- })
} else {
return ['vue-style-loader'].concat(loaders)
}
该文件的配置项较为复杂
diff+ const MiniCssExtractPlugin = require("mini-css-extract-plugin")
- const ExtractTextPlugin = require('extract-text-webpack-plugin')
...
- new ExtractTextPlugin({
+ new MiniCssExtractPlugin({
filename: utils.assetsPath('css/[name].[contenthash].css'),
allChunks: true,
}),
...
diff- const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
- new UglifyJsPlugin({
- uglifyOptions: {
- compress: {
- warnings: false
- }
- },
- sourceMap: config.build.productionSourceMap,
- parallel: true
- })
diff- new webpack.optimize.CommonsChunkPlugin({
- name: 'vendor',
- minChunks (module) {
- return (
- module.resource &&
- /\.js$/.test(module.resource) &&
- module.resource.indexOf(
- path.join(__dirname, '../node_modules')
- ) === 0
- )
- }
- }),
- new webpack.optimize.CommonsChunkPlugin({
- name: 'manifest',
- minChunks: Infinity
- }),
- new webpack.optimize.CommonsChunkPlugin({
- name: 'app',
- async: 'vendor-async',
- children: true,
- minChunks: 3
- }),
...
diff module: {
rules: utils.styleLoaders({
sourceMap: config.build.productionSourceMap,
extract: true,
usePostCSS: true
})
},
+ optimization: {
+ splitChunks: {
+ chunks: 'async',
+ minSize: 30000,
+ minChunks: 1,
+ maxAsyncRequests: 5,
+ maxInitialRequests: 3,
+ automaticNameDelimiter: '~',
+ name: true,
+ cacheGroups: {
+ vendors: {
+ test: /[\\/]node_modules[\\/]/,
+ priority: -10
+ },
+ default: {
+ minChunks: 2,
+ priority: -20,
+ reuseExistingChunk: true
+ }
+ }
+ },
+ runtimeChunk: { name: 'runtime' }
+ },
本文作者:青波
本文链接:
版权声明:本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!