详解webpack4升级指南以及从webpack3.x迁移


Posted in Javascript onJune 12, 2018

几天前webpack发布了新版本v4.0.0,其中做了很多改动,包括0配置以及移除了CommonsChunkPlugin等。由此而来的还有之前webpack3.x的项目如何迁移到新的webpack版本,本文就一个新的vue-cli创建的基于webpack的项目进行迁移。

题外话:不要看0配置是很有噱头,基本是不能满足大部分用户啊的需求,不过加入了更多的默认配置确实也方便了用户,配置相对简单,是一种开箱即用的方式。毕竟之前parcel的0配置确实抢了很多webpack的风头,然后也去弄了一下parcel使用parcel+vue的简单模版工程,有兴趣可以看一下。

一、webpack4的新东西

0. 安装

不在只安装webpack即可,还需要安装一个webpack-cli

全局安装

sudo npm install -g webpack webpack-cli

局部安装(当前文件夹)

npm install --save-dev webpack webpack-cli

1. 0配置

默认的入口为 './src/' 和默认出口 './dist'

对压缩(optimization.minimize)的设置,默认在production时开启,在development时关闭。

默认配置不仅限于上述两项。

2. mode/?mode参数

新增了mode/--mode参数来表示是开发还是生产,mode有两个可选值:development和production,production不支持监听,production侧重于打包后的文件大小,development侧重于构建的速度。

webpack --mode development

也可以在配置文件中配置:

// webpack.config.js
module.exports = {
 mode: "production",
 // ...
}

3. 对uglifyjs升级

在之前的vue脚手架创建的基于webpack的工程,在webpack.prod.conf.js中可以清晰的看到配置中有这么一行:

// UglifyJs do not support ES6+, you can also use babel-minify for better treeshaking: https://github.com/babel/minify

在webpack4.0中已经可以压缩es6代码,如:

class user {
 getUsername() {
  // to do
 }
}

压缩之后为:

详解webpack4升级指南以及从webpack3.x迁移

4. 移除loaders,必须使用rules

在webpack3.x中还保留之前版本的loaders,与rules并存都可以使用,在新版中完全移除了loaders,必须使用rules。

5. sideEffects

在模块的package.js中添加sideEffects:false,当使用export单独导出的时候,不会打包export之外的其他文件,使打包的文件更小。

相关链接:https://github.com/webpack/webpack/tree/master/examples/side-effects

6. webpack4支持多种形式的模块类型,但是有时候可能需要加上type进行配合

如果是CommonJS, AMD, ESM三种类型的模块,使用javascript/auto;

如果是EcmaScript modules(.mjs),使用javascript/esm,其他的模块类型将不生效;

如果只有CommonJS和EcmaScript modules不可用,使用javascript/dynamic;

如果是json类型的文件,允许使用require和import来导入json,使用json;

如果是Webassembly,使用webassembly/experimental —— 官方说是一个实验性的功能。

举个栗子:

rules: [
 {
  test: /\.json$/,
  type: "javascript/auto"
 }
]

7. 支持ES6的方式导入JSON文件,并且可以过滤无用的代码

下面是三种导入json文件的方法:

let jsonData = require('./data.json');

import jsonData from './data.json'

import { first } from './data.json'

其中使用import { first } from './data.json'引入的json文件会忽略没导入的代码,打包时只会将first的打进去。

8. 移除CommonsChunkPlugin,用optimization.splitChunks和optimization.runtimeChunk来代替

这里内容有点多,不做具体介绍,后续可能会出一篇有关optimization.splitChunks的文章,在下面从3.x迁移的时候会有简单介绍,出了上面的新版relesase链接外,下面还推荐几个不错的链接:

RIP CommonsChunkPlugin
medium上的有关移除CommonsChunkPlugin的文章
medium上的有关webpack4更新文章

二、webpack 3.X 迁移到 webpack4.X

1. 更新webpack依赖

npm install -g webpack webpack-cli

npm install --save-dev webpack webpack-cli

2. 更新对应模块

在webpack升级的同时,对应的许多依赖也需要相应的进行升级,下面是在vuec-cli的脚手架中需要的更新;对于其他工程,注意看控制台的报错,是哪个插件报的错就去升级那个插件,如果存在找不到模块之类的错误就去升级对应的loader。

html-webpack-plugin => npm i -D html-webpacl-plugin

webpack-dev-server或者改为webpack-serve => npm i -D webpack-dev-server/npm i -D webpack-serve

vue-loader => npm i -D vue-loader

extract-text-webpack-plugin@next => npm i -D extract-text-webpack-plugin@next

3. 使用mode/?mode

在命令中加入--mode development/ --mode production或者在配置文件中加入mode: 'development'/mode: 'production'。

4. 如果使用CommonsChunkPlugin替换为optimization.splitChunks

使用栗子:

const webpack = require('webpack');

new webpack.optimize.SplitChunksPlugin({
 chunks: "all",
 minSize: 30000,
 minChunks: 1,
 maxAsyncRequests: 5,
 maxInitialRequests: 3,
 name: true,
 cacheGroups: {
  default: {
   minChunks: 2,
   priority: -20,
   reuseExistingChunk: true,
  },
  vendors: {
   test: /[\\/]node_modules[\\/]/,
   priority: -10
  }
 }
})

写在后面

对于webpack的这次升级这里没有一一列举,选了几个相对关键的点,具体可以去看这里;有关从webpack3.x迁移到新版的时候可能还有其他的坑需要慢慢去趟,目前遇到的基本都解决了。

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

Javascript 相关文章推荐
jquery弹出框的用法示例(2)
Aug 26 Javascript
js中的push和join方法使用介绍
Oct 08 Javascript
JS求平均值的小例子
Nov 29 Javascript
jQuery控制元素显示、隐藏、切换、滑动的方法总结
Apr 16 Javascript
原生javascript实现分享到朋友圈功能 支持ios和android
May 11 Javascript
Javascript中浏览器窗口的基本操作总结
Aug 18 Javascript
js图片切换具体实现代码
Oct 13 Javascript
JavaScript、C# URL编码、解码总结
Jan 21 Javascript
Webpack打包慢问题的完美解决方法
Mar 16 Javascript
HTML中使背景图片自适应浏览器大小实例详解
Apr 06 Javascript
完美解决linux下node.js全局模块找不到的情况
May 16 Javascript
简单了解vue.js数组的常用操作
Jun 17 Javascript
webpack分离css单独打包的方法
Jun 12 #Javascript
详解extract-text-webpack-plugin 的使用及安装
Jun 12 #Javascript
webpack 样式加载的实现原理
Jun 12 #Javascript
js遍历添加栏目类添加css 再点击其它删除css【推荐】
Jun 12 #Javascript
webpack项目轻松混用css module的方法
Jun 12 #Javascript
微信小程序js文件改变参数并在视图上及时更新【推荐】
Jun 11 #Javascript
用vue快速开发app的脚手架工具
Jun 11 #Javascript
You might like
ajax实现无刷新分页(php)
2010/07/18 PHP
php中文乱码怎么办如何让浏览器自动识别utf-8
2014/01/15 PHP
PHP转盘抽奖接口实例
2015/02/09 PHP
js控制div及网页相关属性的代码
2009/12/19 Javascript
JavaScript执行顺序详细介绍
2013/12/04 Javascript
用C/C++来实现 Node.js 的模块(二)
2014/09/24 Javascript
浅谈Javascript如何实现匀速运动
2014/12/19 Javascript
基于jQuery实现的QQ表情插件
2015/08/25 Javascript
表单验证正则表达式实例代码详解
2015/11/09 Javascript
jQuery通过ajax请求php遍历json数组到table中的代码(推荐)
2016/06/12 Javascript
jquery事件绑定解绑机制源码解析
2016/09/19 Javascript
javascript 注释代码的几种方法总结
2017/01/04 Javascript
JavaScript函数绑定用法实例分析
2017/11/14 Javascript
vue之浏览器存储方法封装实例
2018/03/15 Javascript
JavaScript实现简单动态进度条效果
2018/04/06 Javascript
微信小程序 自定义弹窗实现过程(附代码)
2019/12/05 Javascript
ES2020 新特性(种草)
2020/01/12 Javascript
在GitHub Pages上使用Pelican搭建博客的教程
2015/04/25 Python
详解Python如何获取列表(List)的中位数
2016/08/12 Python
Python两个内置函数 locals 和globals(学习笔记)
2016/08/28 Python
Pandas探索之高性能函数eval和query解析
2017/10/28 Python
利用python将xml文件解析成html文件的实现方法
2017/12/22 Python
python奇偶行分开存储实现代码
2018/03/19 Python
python调用虹软2.0第三版的具体使用
2019/02/22 Python
Django之创建引擎索引报错及解决详解
2019/07/17 Python
浅析Python 引号、注释、字符串
2019/07/25 Python
详解pyinstaller selenium python3 chrome打包问题
2019/10/18 Python
澳大利亚快时尚鞋类市场:Billini
2018/05/20 全球购物
寻找迷宫的一条出路,o通路;X:障碍
2016/07/10 面试题
总经理司机职责
2014/02/02 职场文书
《可爱的动物》教学反思
2014/02/22 职场文书
后备干部推荐材料
2014/12/24 职场文书
2016拓展训练心得体会范文
2016/01/12 职场文书
Django cookie和session的应用场景及如何使用
2021/04/29 Python
MySQL中日期型单行函数代码详解
2021/06/21 MySQL
php实例化对象的实例方法
2021/11/17 PHP