webpack3.x迁移升级

在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. 更新对应模块

在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迁移到新版的时候可能还有其他的坑需要慢慢去趟，目前遇到的基本都解决了。

相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！

推荐阅读：

vue+update()使用详解

具体分析webpack样式加载