详解基于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 相关文章推荐
My Desktop :) 桌面式代码
Dec 29 Javascript
将函数的实际参数转换成数组的方法
Jan 25 Javascript
javascript 构造函数方式定义对象
Jan 02 Javascript
javascript强制点击广告的方法
Feb 06 Javascript
纯javascript实现的小游戏《Flappy Pig》实例
Jul 27 Javascript
详解Javascript继承的实现
Mar 25 Javascript
Express之get,pos请求参数的获取
May 02 Javascript
vue-music关于Player播放器组件详解
Nov 28 Javascript
vue-cli脚手架引入图片的几种方法总结
Mar 13 Javascript
React 无状态组件(Stateless Component) 与高阶组件
Aug 14 Javascript
vue中使用GraphQL的实例代码
Nov 04 Javascript
JavaScript canvas实现流星特效
May 20 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 目录与文件处理-郑阿奇(续)
2011/07/04 PHP
利用php获取服务器时间的实现代码
2013/06/07 PHP
php爬取天猫和淘宝商品数据
2018/02/23 PHP
Thinkphp5.0 框架的请求方式与响应方式分析
2019/10/14 PHP
jquery刷新页面的实现代码(局部及全页面刷新)
2011/07/11 Javascript
document.getElementBy("id")与$("#id")有什么区别
2013/09/22 Javascript
js实现(全选)多选按钮的方法【附实例】
2016/03/30 Javascript
IE和Firefox之间在JavaScript语法上的差异
2016/04/22 Javascript
php register_shutdown_function函数详解
2017/07/23 Javascript
使用Node.js实现ORM的一种思路详解(图文)
2017/10/24 Javascript
Bootstrap框架建立树形菜单(Tree)的实例代码
2017/10/30 Javascript
Vue添加请求拦截器及vue-resource 拦截器使用
2017/11/23 Javascript
js表达式与运算符简单操作示例
2020/02/15 Javascript
JavaScript内置对象之Array的使用小结
2020/05/12 Javascript
SpringBoot+Vue 前后端合并部署的配置方法
2020/12/30 Vue.js
python使用knn实现特征向量分类
2018/12/26 Python
解决python ogr shp字段写入中文乱码的问题
2018/12/31 Python
dataframe 按条件替换某一列中的值方法
2019/01/29 Python
python中PS 图像调整算法原理之亮度调整
2019/06/28 Python
浅析PEP572: 海象运算符
2019/10/15 Python
python 实现屏幕录制示例
2019/12/23 Python
pytorch使用 to 进行类型转换方式
2020/01/08 Python
tensorflow通过模型文件,使用tensorboard查看其模型图Graph方式
2020/01/23 Python
Python用input输入列表的实例代码
2020/02/07 Python
Django REST 异常处理详解
2020/07/15 Python
CSS3使用transition实现的鼠标悬停淡入淡出
2015/01/09 HTML / CSS
CSS3实现的炫酷菜单代码分享
2015/03/12 HTML / CSS
英国最受欢迎的手表网站:Watch Shop
2016/10/21 全球购物
荷兰皇家航空公司中国官网:KLM中国
2017/12/13 全球购物
保洁主管岗位职责
2013/11/20 职场文书
平面设计专业大学生职业规划书
2014/03/12 职场文书
主持词开场白
2014/03/17 职场文书
党章党规党纪学习心得体会
2016/01/14 职场文书
2019入党申请书格式和范文
2019/06/25 职场文书
分析设计模式之模板方法Java实现
2021/06/23 Java/Android
CSS中实现动画效果-附案例
2022/02/28 HTML / CSS