詳解webpack4升級(jí)指南以及從webpack3.x遷移
幾天前webpack發(fā)布了新版本v4.0.0,其中做了很多改動(dòng),包括0配置以及移除了CommonsChunkPlugin等。由此而來(lái)的還有之前webpack3.x的項(xiàng)目如何遷移到新的webpack版本,本文就一個(gè)新的vue-cli創(chuàng)建的基于webpack的項(xiàng)目進(jìn)行遷移。
題外話:不要看0配置是很有噱頭,基本是不能滿足大部分用戶啊的需求,不過(guò)加入了更多的默認(rèn)配置確實(shí)也方便了用戶,配置相對(duì)簡(jiǎn)單,是一種開箱即用的方式。畢竟之前parcel的0配置確實(shí)搶了很多webpack的風(fēng)頭,然后也去弄了一下parcel使用parcel+vue的簡(jiǎn)單模版工程,有興趣可以看一下。
一、webpack4的新東西
0. 安裝
不在只安裝webpack
即可,還需要安裝一個(gè)webpack-cli
:
全局安裝
sudo npm install -g webpack webpack-cli
局部安裝(當(dāng)前文件夾)
npm install --save-dev webpack webpack-cli
1. 0配置
默認(rèn)的入口為 './src/'
和默認(rèn)出口 './dist'
;
對(duì)壓縮(optimization.minimize)的設(shè)置,默認(rèn)在production時(shí)開啟,在development時(shí)關(guān)閉。
默認(rèn)配置不僅限于上述兩項(xiàng)。
2. mode/–mode參數(shù)
新增了mode/--mode參數(shù)來(lái)表示是開發(fā)還是生產(chǎn),mode有兩個(gè)可選值:development和production,production不支持監(jiān)聽,production側(cè)重于打包后的文件大小,development側(cè)重于構(gòu)建的速度。
webpack --mode development
也可以在配置文件中配置:
// webpack.config.js module.exports = { mode: "production", // ... }
3. 對(duì)uglifyjs升級(jí)
在之前的vue腳手架創(chuàng)建的基于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中已經(jīng)可以壓縮es6代碼,如:
class user { getUsername() { // to do } }
壓縮之后為:
4. 移除loaders,必須使用rules
在webpack3.x中還保留之前版本的loaders,與rules并存都可以使用,在新版中完全移除了loaders,必須使用rules。
5. sideEffects
在模塊的package.js中添加sideEffects:false,當(dāng)使用export單獨(dú)導(dǎo)出的時(shí)候,不會(huì)打包export之外的其他文件,使打包的文件更小。
相關(guān)鏈接:https://github.com/webpack/webpack/tree/master/examples/side-effects
6. webpack4支持多種形式的模塊類型,但是有時(shí)候可能需要加上type進(jìn)行配合
如果是CommonJS, AMD, ESM三種類型的模塊,使用javascript/auto;
如果是EcmaScript modules(.mjs),使用javascript/esm,其他的模塊類型將不生效;
如果只有CommonJS和EcmaScript modules不可用,使用javascript/dynamic;
如果是json類型的文件,允許使用require和import來(lái)導(dǎo)入json,使用json;
如果是Webassembly,使用webassembly/experimental —— 官方說(shuō)是一個(gè)實(shí)驗(yàn)性的功能。
舉個(gè)栗子:
rules: [ { test: /\.json$/, type: "javascript/auto" } ]
7. 支持ES6的方式導(dǎo)入JSON文件,并且可以過(guò)濾無(wú)用的代碼
下面是三種導(dǎo)入json文件的方法:
let jsonData = require('./data.json'); import jsonData from './data.json' import { first } from './data.json'
其中使用import { first } from './data.json'引入的json文件會(huì)忽略沒導(dǎo)入的代碼,打包時(shí)只會(huì)將first的打進(jìn)去。
8. 移除CommonsChunkPlugin,用optimization.splitChunks和optimization.runtimeChunk來(lái)代替
這里內(nèi)容有點(diǎn)多,不做具體介紹,后續(xù)可能會(huì)出一篇有關(guān)optimization.splitChunks的文章,在下面從3.x遷移的時(shí)候會(huì)有簡(jiǎn)單介紹,出了上面的新版relesase鏈接外,下面還推薦幾個(gè)不錯(cuò)的鏈接:
RIP CommonsChunkPlugin
medium上的有關(guān)移除CommonsChunkPlugin的文章
medium上的有關(guān)webpack4更新文章
二、webpack 3.X 遷移到 webpack4.X
1. 更新webpack依賴
npm install -g webpack webpack-cli npm install --save-dev webpack webpack-cli
2. 更新對(duì)應(yīng)模塊
在webpack升級(jí)的同時(shí),對(duì)應(yīng)的許多依賴也需要相應(yīng)的進(jìn)行升級(jí),下面是在vuec-cli的腳手架中需要的更新;對(duì)于其他工程,注意看控制臺(tái)的報(bào)錯(cuò),是哪個(gè)插件報(bào)的錯(cuò)就去升級(jí)那個(gè)插件,如果存在找不到模塊之類的錯(cuò)誤就去升級(jí)對(duì)應(yīng)的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 } } })
寫在后面
對(duì)于webpack的這次升級(jí)這里沒有一一列舉,選了幾個(gè)相對(duì)關(guān)鍵的點(diǎn),具體可以去看這里;有關(guān)從webpack3.x遷移到新版的時(shí)候可能還有其他的坑需要慢慢去趟,目前遇到的基本都解決了。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Three.js實(shí)現(xiàn)臉書元宇宙3D動(dòng)態(tài)Logo效果
本文主要講述通過(guò) Three.js + Blender 技術(shù)棧,實(shí)現(xiàn) Meta 公司炫酷的 3D 動(dòng)態(tài) Logo,內(nèi)容包括基礎(chǔ)模型圓環(huán)、環(huán)面扭結(jié)、管道及模型生成、模型加載、添加動(dòng)畫、添加點(diǎn)擊事件、更換材質(zhì)等2021-11-11JavaScript實(shí)現(xiàn)拖拽元素對(duì)齊到網(wǎng)格(每次移動(dòng)固定距離)
最近在做一個(gè)拖拽元素的附加功能,就是對(duì)齊到網(wǎng)格,實(shí)際上就是確定好元素的初始位置,然后拖拽元素時(shí),每次移動(dòng)固定的距離。讓元素都可以在網(wǎng)格內(nèi)對(duì)齊2016-11-11正則表達(dá)式校驗(yàn)身份證號(hào)碼完整代碼示例
在做用戶實(shí)名驗(yàn)證時(shí),常會(huì)用到身份證號(hào)碼的正則表達(dá)式及校驗(yàn)方案,下面這篇文章主要給大家介紹了關(guān)于正則表達(dá)式校驗(yàn)身份證號(hào)碼的相關(guān)資料,需要的朋友可以參考下2024-04-04JS表單數(shù)據(jù)驗(yàn)證的正則表達(dá)式(常用)
這篇文章主要介紹了JS表單數(shù)據(jù)驗(yàn)證的正則表達(dá)式,這種方法比較常用,以及使用正則表達(dá)式驗(yàn)證表單的方法,本文給大家介紹非常詳細(xì),需要的的朋友參考下2017-02-02JS判斷頁(yè)面加載狀態(tài)以及添加遮罩和緩沖動(dòng)畫的代碼
JS判斷頁(yè)面加載狀態(tài)以及添加遮罩和緩沖動(dòng)畫的代碼廢話少說(shuō),直接貼代碼!有注釋2012-10-10JavaScript知識(shí)點(diǎn)總結(jié)之如何提高性能
JavaScript的性能問(wèn)題不容小覷,這就需要我們開發(fā)人員在編寫JavaScript程序時(shí)多注意一些細(xì)節(jié),本文非常詳細(xì)的介紹了一下JavaScript性能優(yōu)化方面的知識(shí)點(diǎn),絕對(duì)是干貨,需要的朋友快來(lái)一起學(xué)習(xí)吧2016-01-01