详解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 相关文章推荐
JavaScript 常见对象类创建代码与优缺点分析
Dec 07 Javascript
基于jquery的web页面日期格式化插件
Nov 15 Javascript
js和jquery使按钮失效为不可用状态的方法
Jan 26 Javascript
js获取窗口相对于屏幕左边和上边的位置坐标
May 15 Javascript
js判断当前浏览器类型,判断IE浏览器方法
Jun 02 Javascript
JS实现3D图片旋转展示效果代码
Sep 22 Javascript
基于Javascript实现倒计时功能
Feb 22 Javascript
JavaScript实现多栏目切换效果
Dec 12 Javascript
详解Vue-cli 创建的项目如何跨域请求
May 18 Javascript
基于node.js实现微信支付退款功能
Dec 19 Javascript
Vue 项目中遇到的跨域问题及解决方法(后台php)
Mar 28 Javascript
vue 实现特定条件下绑定事件
Nov 09 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
php文档工具PHP Documentor安装与使用方法
2016/01/25 PHP
php实现有序数组打印或排序的方法【附Python、C及Go语言实现代码】
2016/11/10 PHP
Laravel 默认邮箱登录改成用户名登录的实现方法
2019/08/12 PHP
js获取某月的最后一天日期的简单实例
2013/06/22 Javascript
JS分页控件 可用于无刷新分页
2013/07/23 Javascript
Jquery 实现表格颜色交替变化鼠标移过颜色变化实例
2013/08/28 Javascript
JS可以控制样式的名称写法一览
2014/01/16 Javascript
jQuery实现复选框批量选择与反选的方法
2015/06/17 Javascript
jQuery自定义动画函数实例详解(附demo源码)
2015/12/10 Javascript
NodeJS创建最简单的HTTP服务器
2017/05/15 NodeJs
利用javascript如何随机生成一定位数的密码
2017/09/22 Javascript
全站最详细的Vuex教程
2018/04/13 Javascript
详解vue 计算属性与方法跟侦听器区别(面试考点)
2018/04/23 Javascript
vue-cli3脚手架的配置及使用教程
2018/08/28 Javascript
Vuejs监听vuex中值的变化的方法示例
2018/12/02 Javascript
微信小程序获取用户openid的实现
2018/12/24 Javascript
Vue Cli 3项目使用融云IM实现聊天功能的方法
2019/04/19 Javascript
运用js实现图层拖拽的功能
2019/05/24 Javascript
Vue 中使用富文本编译器wangEditor3的方法
2019/09/26 Javascript
关于JS模块化的知识点分享
2019/10/16 Javascript
JavaScript相等运算符的九条规则示例详解
2019/10/20 Javascript
Vue之封装公用变量以及实现方式
2020/07/31 Javascript
nginx部署多个vue项目的方法示例
2020/09/06 Javascript
python中的sort方法使用详解
2014/07/25 Python
基于python实现雪花算法过程详解
2019/11/16 Python
DataFrame.to_excel多次写入不同Sheet的实例
2019/12/02 Python
PyQt5多线程刷新界面防假死示例
2019/12/13 Python
Pytorch之保存读取模型实例
2019/12/30 Python
Keras自定义IOU方式
2020/06/10 Python
Html5 canvas实现粒子时钟的示例代码
2018/09/06 HTML / CSS
SneakerStudio英国:最佳运动鞋商店
2019/05/22 全球购物
幼儿教师个人求职信范文
2013/09/21 职场文书
大学生毕业自我评价范文分享
2013/11/11 职场文书
优秀部门获奖感言
2014/02/14 职场文书
oracle表分区的概念及操作
2021/04/24 Oracle
Vertica集成Apache Hudi重磅使用指南
2022/03/31 Servers