详解基于Vue cli生成的Vue项目的webpack4升级


Posted in Javascript onJune 19, 2018

前面的话

本文将详细介绍从webpack3到webpack4的升级过程

概述

相比于webpack3,webpack4可以零配置运行,打包速度比之前提高了90%,可以直接到ES6的代码进行无用代码剔除,新增的optimization使用简单

在未来,CSS、HTMl和文件都会成为原生模块

【0配置】

webpack4 设置了默认值,以便无配置启动项目

  1. entry 默认值是 ./src/
  2. output.path 默认值是 ./dist
  3. mode 默认值是 production

【模块类型】

webpack4提供了5种模块类型

  1. json: 可通过 require 和 import 导入的 JSON 格式的数据(默认为 .json 的文件)
  2. webassembly: WebAssembly 模块,(目前是 .wasm 文件的默认类型)
  3. javascript/auto: (webpack 3中的默认类型)支持所有的JS模块系统:CommonJS、AMD。
  4. javascript/esm: EcmaScript模块(默认 .mjs 文件)。
  5. 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这三个选择可选

【开发模式】

  1. 浏览器调试工具
  2. 注释、开发阶段的详细错误日志和提示
  3. 快速和优化的增量构建机制
  4. 开启 output.pathinfo 在 bundle 中显示模块信息
  5. 开启 NamedModulesPlugin
  6. 开启 NoEmitOnErrorsPlugin

【生产模式】

  1. 启用所有优化代码的功能
  2. 更小的bundle大小
  3. 去除只在开发阶段运行的代码
  4. 关闭内存缓存
  5. Scope hoisting 和 Tree-shaking
  6. 开启 NoEmitOnErrorsPlugin
  7. 开启 ModuleConcatenationPlugin
  8. 开启 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

通过提供字符串值,可以使用插件的预设模式

  1. signal: 创建一个被所有生成的块共享的runtime文件
  2. 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' }
+ },

详细配置移步前端小站源码

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript xml为数据源的下拉框控件
Jul 07 Javascript
基于jquery的网页SELECT下拉框美化代码
Oct 28 Javascript
JavaScript中的16进制字符(改进)
Nov 21 Javascript
javascript动态添加checkbox复选框的方法
Dec 23 Javascript
jquery限定文本框只能输入数字(整数和小数)
Jan 08 Javascript
基于Jquery插件Uploadify实现实时显示进度条上传图片
Mar 26 Javascript
详解JavaScript中的六种错误类型
Sep 21 Javascript
Bootstrap 模态框多次显示后台提交多次BUG的解决方法
Dec 26 Javascript
jQuery实现带右侧索引功能的通讯录示例【附源码下载】
Apr 17 jQuery
React 使用Hooks简化受控组件的状态绑定
Mar 18 Javascript
微信小程序实现蓝牙打印
Sep 23 Javascript
JS数组降维的实现Array.prototype.concat.apply([], arr)
Apr 28 Javascript
Vue中"This dependency was not found"问题的解决方法
Jun 19 #Javascript
Vue.js 2.x之组件的定义和注册图文详解
Jun 19 #Javascript
Vue中使用webpack别名的方法实例详解
Jun 19 #Javascript
vue mounted组件的使用
Jun 18 #Javascript
基于rollup的组件库打包体积优化小结
Jun 18 #Javascript
详解组件库的webpack构建速度优化
Jun 18 #Javascript
Javascript实现异步编程的过程
Jun 18 #Javascript
You might like
PHP 循环删除无限分类子节点的实现代码
2013/06/21 PHP
php操作mysqli(示例代码)
2013/10/28 PHP
提高php编程效率技巧
2015/08/13 PHP
PHP使用fopen与file_get_contents读取文件实例分享
2016/03/04 PHP
浅析Yii2 gridview实现批量删除教程
2016/04/22 PHP
Smarty分页实现方法完整实例
2016/05/11 PHP
JQuery最佳实践之精妙的自定义事件
2010/08/11 Javascript
javascript + jquery实现定时修改文章标题
2014/03/19 Javascript
JS实现关键字搜索时的相关下拉字段效果
2014/08/05 Javascript
JS实现的数组全排列输出算法
2015/03/19 Javascript
纯js实现无限空间大小的本地存储
2015/06/18 Javascript
jQuery实现高亮显示网页关键词的方法
2015/08/07 Javascript
使用递归遍历对象获得value值的实现方法
2016/06/14 Javascript
微信小程序开发之圆形菜单 仿建行圆形菜单实例
2016/12/12 Javascript
node使用UEditor富文本编辑器的方法实例
2017/07/11 Javascript
layui框架中layer父子页面交互的方法分析
2017/11/15 Javascript
vue编译打包本地查看index文件的方法
2018/02/23 Javascript
Javascript 对象(object)合并操作实例分析
2019/07/30 Javascript
解决使用layui对select append元素无效或者未及时更新的问题
2019/09/18 Javascript
JavaScript find()方法及返回数据实例
2020/04/30 Javascript
基于JQuery和DWR实现异步数据传递
2020/10/16 jQuery
Python实现删除文件但保留指定文件
2015/06/21 Python
Python学习笔记之Zip和Enumerate用法实例分析
2019/08/14 Python
利用PyQt中的QThread类实现多线程
2020/02/18 Python
python 无损批量压缩图片(支持保留图片信息)的示例
2020/09/22 Python
CSS3实现点击放大的动画实例代码
2017/02/27 HTML / CSS
如何利用input事件来监听移动端的输入
2016/04/15 HTML / CSS
GEOX鞋美国官方网站:意大利会呼吸的鞋
2017/07/12 全球购物
以实惠的价格轻松租车,免费取消:Easyrentcars
2019/07/16 全球购物
幼儿园秋游活动方案
2014/01/21 职场文书
信息技术培训感言
2014/03/06 职场文书
三好学生事迹材料
2014/12/24 职场文书
烛光里的微笑观后感
2015/06/17 职场文书
幼儿园元旦主持词
2015/07/06 职场文书
Python使用scapy模块发包收包
2021/05/07 Python
如何利用Python实现一个论文降重工具
2021/07/09 Python