這次給大家帶來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
}
}
壓縮之後為:
![](https://img.laitimes.com/img/__Qf2AjLwojIjJCLyojI0JCLicmbw5yN5EWYihTZ4IGMidDNzADNkBTYzMmMlZmY3gTM0EDNi9CX0JXZ252bj91Ztl2Lc52YucWbp5GZzNmLn9Gbi1yZtl2Lc9CX6MHc0RHaiojIsJye.png)
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
[email protected] => npm i -D [email protected]
…
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中文網其它相關文章!
推薦閱讀: