webpack3.x遷移升級

php中世界最好的语言原創: 2018-06-13 11:47:291216瀏覽

這次帶給大家webpack3.x遷移升級，webpack3.x遷移升級的注意事項有哪些，以下就是實戰案例，一起來看一下。

題外話：不要看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. 更新对应模块

在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 <br>…

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

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

webpack3.x遷移升級

相關文章