当前位置： 移动技术网 > IT编程>开发语言>JavaScript > 详解webpack4升级指南以及从webpack3.x迁移

详解webpack4升级指南以及从webpack3.x迁移

2018年08月12日  | 移动技术网IT编程  | 我要评论

几天前webpack发布了新版本，其中做了很多改动，包括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:

在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之外的其他文件，使打包的文件更小。

相关链接：

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的文章

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网