详解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 相关文章推荐
extJs 常用到的增,删,改,查操作代码
Dec 28 Javascript
jquery实现动态菜单的实例代码
Nov 28 Javascript
基于jQuery实现在线选座之高铁版
Aug 24 Javascript
JS原型与原型链的深入理解
Feb 15 Javascript
JS实现双击内容变为可编辑状态
Mar 03 Javascript
JS实现标签页切换效果
May 04 Javascript
详解vue axios中文文档
Sep 12 Javascript
jQuery简单实现的HTML页面文本框模糊匹配查询功能完整示例
May 09 jQuery
React Hooks的深入理解与使用
Nov 12 Javascript
ES10的13个新特性示例(小结)
Sep 23 Javascript
vue子组件改变父组件传递的prop值通过sync实现数据双向绑定(DEMO)
Feb 01 Javascript
vue-router重写push方法,解决相同路径跳转报错问题
Aug 07 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
curl不使用文件存取cookie php使用curl获取cookie示例
2014/01/26 PHP
symfony表单与页面实现技巧
2015/01/26 PHP
php提取身份证号码中的生日日期以及验证是否为成年人的函数
2015/09/29 PHP
老生常谈PHP面向对象之命令模式(必看篇)
2017/05/24 PHP
解决使用attachEvent函数时,this指向被绑定的元素的问题的方法
2007/08/13 Javascript
Javascript 拖拽的一些简单的应用(逐行分析代码,让你轻松了拖拽的原理)
2015/01/23 Javascript
JavaScript中调用函数的4种方式代码实例
2015/07/08 Javascript
jquery获得当前html页面源码的方法
2015/07/14 Javascript
JavaScript中instanceof运算符的使用示例
2016/06/08 Javascript
javascript循环链表之约瑟夫环的实现方法
2017/01/16 Javascript
非常实用的vue导航钩子
2017/03/20 Javascript
移动端Ionic App 资讯上下循环滚动的实现代码(跑马灯效果)
2017/08/29 Javascript
微信小程序富文本渲染引擎的详解
2017/09/30 Javascript
nodejs之koa2请求示例(GET,POST)
2018/08/07 NodeJs
VUE写一个简单的表格实例
2019/08/06 Javascript
vue 全局环境切换问题
2019/10/27 Javascript
Javascript模块化机制实现原理详解
2020/04/02 Javascript
Ant design vue中的联动选择取消操作
2020/10/31 Javascript
如何使用RoughViz可视化Vue.js中的草绘图表
2021/01/30 Vue.js
[03:05]DOTA2英雄基础教程 嗜血狂魔
2013/12/10 DOTA
Python中的生成器和yield详细介绍
2015/01/09 Python
详解Python编程中基本的数学计算使用
2016/02/04 Python
Python科学计算包numpy用法实例详解
2018/02/08 Python
Python数据分析matplotlib设置多个子图的间距方法
2018/08/03 Python
Python的条件表达式和lambda表达式实例
2019/01/31 Python
python中的协程深入理解
2019/06/10 Python
解决python父线程关闭后子线程不关闭问题
2020/04/25 Python
Python数据可视化常用4大绘图库原理详解
2020/10/23 Python
Joseph官网:英国小众奢侈品牌
2019/05/17 全球购物
护理不良事件检讨书
2014/02/06 职场文书
健康状况证明书
2014/11/26 职场文书
三好学生评语大全
2014/12/29 职场文书
伊索寓言读书笔记
2015/06/30 职场文书
趣味运动会标语口号
2015/12/26 职场文书
Python数据分析入门之数据读取与存储
2021/05/13 Python
警用民用对讲机找不同
2022/02/18 无线电