详解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 相关文章推荐
多个iframe自动调整大小的问题
Sep 18 Javascript
jQuery获取CSS样式中的颜色值的问题,不同浏览器格式不同的解决办法
May 13 Javascript
使用JavaScript修改浏览器URL地址栏的实现代码
Oct 21 Javascript
jQuery toggleClass应用实例(附效果图)
Apr 06 Javascript
javascript Deferred和递归次数限制实例
Oct 21 Javascript
基于JavaScript实现全选、不选和反选效果
Feb 15 Javascript
js Date()日期函数浏览器兼容问题解决方法
Sep 12 Javascript
利用vscode调试编译后的js代码详解
May 14 Javascript
微信小程序使用form表单获取输入框数据的实例代码
May 17 Javascript
Vue+Node实现商品列表的分页、排序、筛选,添加购物车功能详解
Dec 07 Javascript
JavaScript组合设计模式--改进引入案例分析
May 23 Javascript
JS实现超级好看的鼠标小尾巴特效
Dec 01 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
世界上第一台立体声收音机
2021/03/01 无线电
关于PHP5 Session生命周期介绍
2010/03/02 PHP
php读取csv实现csv文件下载功能
2013/12/18 PHP
php根据年月获取季度的方法
2014/03/31 PHP
PHP安全的URL字符串base64编码和解码
2014/06/19 PHP
彻底删除thinkphp3.1案例blog标签的方法
2014/12/05 PHP
PHP is_array() 检测变量是否是数组的实现方法
2016/06/13 PHP
php版微信小店API二次开发及使用示例
2016/11/12 PHP
JavaScript高级程序设计(第3版)学习笔记2 js基础语法
2012/10/11 Javascript
js window.open弹出新的网页窗口
2014/01/16 Javascript
javascript对象的相关操作小结
2016/05/16 Javascript
AngularJS基础 ng-dblclick 指令用法
2016/08/01 Javascript
Vue 过渡(动画)transition组件案例详解
2017/01/22 Javascript
浅谈$_FILES数组为空的原因
2017/02/16 Javascript
微信小程序 setData的使用方法详解
2017/04/20 Javascript
微信小程序网络请求封装示例
2018/07/24 Javascript
JavaScript实现数组全排列、去重及求最大值算法示例
2018/07/30 Javascript
javascript中函数的写法实例代码详解
2018/10/28 Javascript
vue动态路由:路由参数改变,视图不更新问题的解决
2019/11/05 Javascript
js 数组当前行添加数据方法详解
2020/07/28 Javascript
使用Python下载Bing图片(代码)
2013/11/07 Python
推荐11个实用Python库
2015/01/23 Python
在Python的Django框架上部署ORM库的教程
2015/04/20 Python
Django在win10下的安装并创建工程
2017/11/20 Python
Python SQL查询并生成json文件操作示例
2018/08/17 Python
python中文编码与json中文输出问题详解
2018/08/24 Python
Python切片操作去除字符串首尾的空格
2019/04/22 Python
pyenv与virtualenv安装实现python多版本多项目管理
2019/08/17 Python
网络艺术零售业的先驱者:artrepublic
2017/09/26 全球购物
极简鞋类,赤脚的感觉:Lems Shoes
2019/08/06 全球购物
印度手工编织服装和家居用品商店:Fabindi
2019/10/07 全球购物
市场营销专业毕业生求职信
2014/03/26 职场文书
会议欢迎标语
2014/06/30 职场文书
反邪教教育心得体会
2016/01/15 职场文书
python基于tkinter制作m3u8视频下载工具
2021/04/24 Python
go语言求任意类型切片的长度操作
2021/04/26 Golang