详解基于Vue cli生成的Vue项目的webpack4升级
前面的话
本文将详细介绍从webpack3到webpack4的升级过程
概述
相比于webpack3,webpack4可以零配置运行,打包速度比之前提高了90%,可以直接到es6的代码进行无用代码剔除,新增的optimization使用简单
在未来,css、html和文件都会成为原生模块
【0配置】
webpack4 设置了默认值,以便无配置启动项目
- entry 默认值是 ./src/
- output.path 默认值是 ./dist
- mode 默认值是 production
【模块类型】
webpack4提供了5种模块类型
- 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
相比于webpack3,webpack4新增了一个mode配置选择,用来表示配置模式的选择情况
module.exports = { mode: 'production' }
包括生产环境production、开发环境devolopment和自定义none这三个选择可选
【开发模式】
- 浏览器调试工具
- 注释、开发阶段的详细错误日志和提示
- 快速和优化的增量构建机制
- 开启 output.pathinfo 在 bundle 中显示模块信息
- 开启 namedmodulesplugin
- 开启 noemitonerrorsplugin
【生产模式】
- 启用所有优化代码的功能
- 更小的bundle大小
- 去除只在开发阶段运行的代码
- 关闭内存缓存
- scope hoisting 和 tree-shaking
- 开启 noemitonerrorsplugin
- 开启 moduleconcatenationplugin
- 开启 optimization.minimize
【none】
禁用所有的默认设置
optimization
从webpack4开始官方移除了commonchunk插件,改用了optimization属性进行更加灵活的配置,下面来介绍optimization下的一些常用配置项
【minimize】
利用unglifyjswebpackplugin插件来压缩模块,生产环境下该值默认为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的项目对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' } + },
详细配置移步
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。