详解Vue CLI项目从Webpack 3升级到Webpack 4的配置与操作

Vue CLI项目Webpack 4升级概述

前言

文章深入解析从webpack3迁移至webpack4的具体步骤

概要

与webpack3相比，webpack4支持零配置启动，构建效率提升90%，原生支持ES6代码的Tree Shaking，且optimization配置更加简便

未来CSS、HTML及文件将作为原生模块处理

Webpack 4零配置与模块类型

【零配置】

webpack4内置默认配置，实现无需配置文件即可启动项目

entry 默认指向 ./src/
output.path 默认指向 ./dist
mode 默认设为 production

【模块类型】

webpack4定义了五种模块类型

json: 允许通过 require 和 import 引入的 JSON 数据（默认关联 .json 文件）
webassembly: WebAssembly 模块（默认关联 .wasm 文件）
javascript/auto: (webpack 3默认类型) 兼容所有JS模块规范：CommonJS、AMD。
javascript/esm: EcmaScript模块（默认关联 .mjs 文件）。
javascript/dynamic: 仅兼容 CommonJS 与 AMD。

webpack 4 不仅支持本地解析 JSON，还支持对 JSON 进行 Tree Shaking。当采用 ESM 语法 import json 时，webpack 会移除 JSON Module 中未使用的导出。此外，若需通过 loader 将 json 转换为 js，必须将 type 设置为 javascript/auto

Mode配置与开发生产环境差异

模式mode

相较于webpack3，webpack4引入了mode配置项，用于指定构建模式


module.exports = {
 mode: 'production'
}

可选值包括生产环境production、开发环境development和自定义none

【开发模式】

浏览器调试工具支持
注释、开发阶段的详细错误日志与提示信息
快速且优化的增量构建机制
启用 output.pathinfo 以在 bundle 中展示模块信息
启用 NamedModulesPlugin
启用 NoEmitOnErrorsPlugin

【生产模式】

启用所有代码优化功能
生成更小的 bundle 文件
移除仅用于开发阶段的代码
关闭内存缓存
启用 Scope hoisting 与 Tree-shaking
启用 NoEmitOnErrorsPlugin
启用 ModuleConcatenationPlugin
启用 optimization.minimize

【none】

禁用所有默认配置

Optimization优化配置详解

optimization

自webpack4起，官方移除了commonChunk插件，转而采用optimization属性进行更灵活的配置，下文介绍optimization下的常用配置项

【minimize】

利用 uglifyjs-webpack-plugin 插件压缩模块，生产环境下该值默认为true


optimization: {
  minimize: false
 }

【minimier】

可配置其他插件以执行压缩功能


const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

module.exports = {
 //...
 optimization: {
  minimizer: [
   new UglifyJsPlugin({ /* your config */ })
  ]
 }
};

【splitChunks】

webpack4默认采用 splitChunksPlugin 插件实现代码分割，以此取代webpack3中的 commonChunksPlugin 插件


module.exports = {
 //...
 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】

通过设置 runtimeChunk: true 为每个入口默认添加一个仅包含 runtime 的 chunk

通过提供字符串值，可调用插件的预设模式

signal: 创建一个被所有生成块共享的 runtime 文件
multiple: 为公共块创建多个 runtime 文件

缺省值为false，表示每个入口块默认内嵌 runtime 代码


runtimeChunk {
   name: "runtime"
  }

【noEmitOnErrors】

只要编译时出现错误，便通过 noEmitOnErrors 属性跳过 emit 阶段，以此替代 NoEmitOnErrorsPlugin 插件

【nameModules】

使用可读的模块标识，便于调试。webpack在开发模式下默认开启，生产模式下默认关闭，以此替代 NamedModulesPlugin 插件


module.exports = {
 //...
 optimization: {
  namedModules: true
 }
};

Vue CLI项目升级操作步骤

升级

接下来基于 vue-cli 项目对 webpack 配置进行升级

1、升级nodejs

使用 webpack4 时，必须确保 Node.js 版本 >= 8.9.4，因为 webpack4 大量使用了ES6语法，这些语法在 nodejs新版 v8 中获得了原生支持

2、升级webpack主要部件，包括webpack、webpack-bundle-analyzer、webpack-dev-server、webpack-merge

升级操作简便，先删除再安装即可。需注意webpack4版本中 cli 工具分离为 webpack 核心库与 webpack-cli 命令行工具两个模块，使用 CLI 必须将 webpack-cli 安装至项目中


cnpm uninstall -D webpack webpack-bundle-analyzer webpack-dev-server webpack-merge
cnpm install -D webpack webpack-cli webpack-bundle-analyzer webpack-dev-server webpack-merge

3、升级webpack相关插件，包括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


cnpm 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
cnpm 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

4、升级vue-loader

由于vue-loader升级到版本15后配置变化较大，为稳妥起见，可将vue-loader仅升级至14.4.2


cnpm uninstall -D vue-loader
cnpm uninstall -D vue-loader@14.4.2

5、替换webpack相关插件，将 extract-text-webpack-plugin 替换为 mini-css-extract-plugin


cnpm uninstall -D extract-text-webpack-plugin


cnpm install -D mini-css-extract-plugin

配置文件修改指南

配置

下文详细说明配置文件的修改内容：

1、webpack.base.conf.js文件

增加 node:process.env.NODE_ENV 即可


module.exports = {
+ mode: process.env.NODE_ENV,
...

2、webpack.prop.conf.js文件

该文件的配置项较为复杂

（1）将 ExtractTextPlugin 替换为 MiniCssExtraPlugin


+ 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,
  }),
...

（2）删除 UglifyJsPlugin 配置项


- const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
...
- new UglifyJsPlugin({
-   uglifyOptions: {
-    compress: {
-     warnings: false
-    }
-   },
-   sourceMap: config.build.productionSourceMap,
-   parallel: true
- })

（3）删除 CommonsChunkPlugin 配置项


- 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
-  }), 
...

（4）添加 optimization 配置项


+ 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' }
+ },

详细配置可参考前端小站源码

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。

Vue CLI项目Webpack 3至4升级实战指南