几天前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 } }
压缩之后为:
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. 更新对应模块