详解基于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 相关文章推荐
借用Google的Javascript API Loader来加速你的网站
Jan 28 Javascript
基于JQuery制作的产品广告效果
Dec 08 Javascript
js中parseInt函数浅谈
Jul 31 Javascript
javascript学习笔记(一)基础知识
Sep 30 Javascript
JavaScript字符串常用类使用方法汇总
Apr 14 Javascript
.NET微信公众号开发之创建自定义菜单
Jul 16 Javascript
Radio 单选JS动态添加的选项onchange事件无效的解决方法
Dec 12 Javascript
5种JavaScript脚本加载的方式
Jan 16 Javascript
JSON数据中存在单个转义字符“\”的处理方法
Jul 11 Javascript
小程序实现人脸识别功能(百度ai)
Dec 23 Javascript
JS代码检查工具ESLint介绍与使用方法
Feb 04 Javascript
TypeScript实用技巧 Nominal Typing名义类型详解
Sep 23 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防盗链的基本思想 防盗链的设置方法
2015/09/25 PHP
PHP中抽象类、接口的区别与选择分析
2016/03/29 PHP
PHP仿qq空间或朋友圈发布动态、评论动态、回复评论、删除动态或评论的功能(上)
2017/05/26 PHP
Lumen timezone 时区设置方法(慢了8个小时)
2018/01/20 PHP
laravel 5.3 单用户登录简单实现方法
2019/10/14 PHP
jQuery使用一个按钮控制图片的伸缩实现思路
2013/04/19 Javascript
jquery禁用右键单击功能屏蔽F5刷新
2014/03/17 Javascript
js实现select跳转功能代码
2014/10/22 Javascript
使用nodejs开发cli项目实例
2015/06/03 NodeJs
jQuery实现定时读取分析xml文件的方法
2015/07/16 Javascript
基于OL2实现百度地图ABCD marker的效果
2015/10/01 Javascript
详解Bootstrap按钮
2016/01/04 Javascript
详解AngularJS过滤器的使用
2016/03/11 Javascript
jQuery validate+artdialog+jquery form实现弹出表单思路详解
2016/04/18 Javascript
javascript实现获取图片大小及图片等比缩放的方法
2016/11/24 Javascript
Angular中实现树形结构视图实例代码
2017/05/05 Javascript
Javascript实现页面滚动时导航智能定位
2017/05/06 Javascript
JavaScript禁用右键单击优缺点分析
2019/01/20 Javascript
python 参数列表中的self 显式不等于冗余
2008/12/01 Python
Python实现带参数与不带参数的多重继承示例
2018/01/30 Python
eclipse创建python项目步骤详解
2019/05/10 Python
Django实现跨域请求过程详解
2019/07/25 Python
Django中ajax发送post请求 报403错误CSRF验证失败解决方案
2019/08/13 Python
python能做什么 python的含义
2019/10/12 Python
keras 解决加载lstm+crf模型出错的问题
2020/06/10 Python
linux面试题参考答案(11)
2016/11/26 面试题
新闻学专业应届生求职信
2013/11/08 职场文书
酒店总经理欢迎词
2014/01/15 职场文书
正风肃纪剖析材料范文
2014/10/10 职场文书
2015年社区中秋节活动总结
2015/03/23 职场文书
学生检讨书怎么写
2015/05/07 职场文书
家电创业计划书
2019/08/05 职场文书
端午节将至,用Python爬取粽子数据并可视化,看看网友喜欢哪种粽子吧!
2021/06/11 Python
mybatis 解决从列名到属性名的自动映射失败问题
2021/06/30 Java/Android
python字符串的一些常见实用操作
2022/04/06 Python
MySQL的存储过程和相关函数
2022/04/26 MySQL