詳解基于Vue cli生成的Vue項(xiàng)目的webpack4升級
前面的話
本文將詳細(xì)介紹從webpack3到webpack4的升級過程
概述
相比于webpack3，webpack4可以零配置運(yùn)行，打包速度比之前提高了90%，可以直接到ES6的代碼進(jìn)行無用代碼剔除，新增的optimization使用簡單
在未來，CSS、HTMl和文件都會(huì)成為原生模塊
【0配置】
webpack4 設(shè)置了默認(rèn)值，以便無配置啟動(dòng)項(xiàng)目
- entry 默認(rèn)值是 ./src/
- output.path 默認(rèn)值是 ./dist
- mode 默認(rèn)值是 production
【模塊類型】
webpack4提供了5種模塊類型
- json: 可通過 require 和 import 導(dǎo)入的 JSON 格式的數(shù)據(jù)(默認(rèn)為 .json 的文件)
- webassembly: WebAssembly 模塊，（目前是 .wasm 文件的默認(rèn)類型）
- javascript/auto: (webpack 3中的默認(rèn)類型)支持所有的JS模塊系統(tǒng)：CommonJS、AMD。
- javascript/esm: EcmaScript模塊（默認(rèn) .mjs 文件）。
- javascript/dynamic: 僅支持 CommonJS & AMD。
webpack 4 不僅支持本地處理 JSON，還支持對 JSON 的 Tree Shaking。當(dāng)使用 ESM 語法 import json 時(shí)，webpack 會(huì)消除掉JSON Module 中未使用的導(dǎo)出。此外，如果要用 loader 轉(zhuǎn)換 json 為 js，需要設(shè)置 type 為 javascript/auto
模式mode
相比于webpack3，webpack4新增了一個(gè)mode配置選擇，用來表示配置模式的選擇情況
module.exports = {
mode: 'production'
}
包括生產(chǎn)環(huán)境production、開發(fā)環(huán)境devolopment和自定義none這三個(gè)選擇可選
【開發(fā)模式】
- 瀏覽器調(diào)試工具
- 注釋、開發(fā)階段的詳細(xì)錯(cuò)誤日志和提示
- 快速和優(yōu)化的增量構(gòu)建機(jī)制
- 開啟 output.pathinfo 在 bundle 中顯示模塊信息
- 開啟 NamedModulesPlugin
- 開啟 NoEmitOnErrorsPlugin
【生產(chǎn)模式】
- 啟用所有優(yōu)化代碼的功能
- 更小的bundle大小
- 去除只在開發(fā)階段運(yùn)行的代碼
- 關(guān)閉內(nèi)存緩存
- Scope hoisting 和 Tree-shaking
- 開啟 NoEmitOnErrorsPlugin
- 開啟 ModuleConcatenationPlugin
- 開啟 optimization.minimize
【none】
禁用所有的默認(rèn)設(shè)置
optimization
從webpack4開始官方移除了commonchunk插件，改用了optimization屬性進(jìn)行更加靈活的配置，下面來介紹optimization下的一些常用配置項(xiàng)
【minimize】
利用unglifyjsWebpackPlugin插件來壓縮模塊，生產(chǎn)環(huán)境下該值默認(rèn)為true
optimization: {
minimize: false
}
【minimier】
可以使用其他插件來執(zhí)行壓縮功能
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
module.exports = {
//...
optimization: {
minimizer: [
new UglifyJsPlugin({ /* your config */ })
]
}
};
【splitChunks】
webpack4默認(rèn)使用splitChunksPlugin插件來實(shí)現(xiàn)代碼分割功能，來替代webpack3中的commonChunksPlugin插件
module.exports = {
//...
optimization: {
splitChunks: {
chunks: 'async',
minSize: 30000,
minChunks: 1,
maxAsyncRequests: 5,
maxInitialRequests: 3,
automaticNameDelimiter: '~',
name: true,
cacheGroups: {
vendors: {
test: /[\\/]node_modules[\\/]/,
priority: -10
},
default: {
minChunks: 2,
priority: -20,
reuseExistingChunk: true
}
}
}
}
【runtimeChunk】
通過設(shè)置 runtimeChunk: true 來為每一個(gè)入口默認(rèn)添加一個(gè)只包含 runtime 的 chunk
通過提供字符串值，可以使用插件的預(yù)設(shè)模式
- signal: 創(chuàng)建一個(gè)被所有生成的塊共享的runtime文件
- multiple: 為共同的塊創(chuàng)建多個(gè)runtime文件
缺省值為false，表示每個(gè)入口塊默認(rèn)內(nèi)嵌runtime代碼
runtimeChunk {
name: "runtime"
}
【noEmitOnErrors】
只要在編譯時(shí)出現(xiàn)錯(cuò)誤，就使用noEmitOnErrors屬性來跳過emit 階段，用來替代 NoEmitOnErrorsPlugin 插件
【nameModules】
使用可讀的模塊標(biāo)識，方便更好的調(diào)試。webpack在開發(fā)模式下默認(rèn)開啟，生產(chǎn)模式下默認(rèn)關(guān)閉，用來替代 NamedModulesPlugin 插件
module.exports = {
//...
optimization: {
namedModules: true
}
};
升級
下面就基于vue-cli的項(xiàng)目對webpack配置進(jìn)行升級
1、升級nodejs
使用 webpack4 時(shí)，必須保證 Node.js 版本 >= 8.9.4，因?yàn)?webpack4 使用了大量的ES6語法，這些語法在 nodejs新版 v8 中得到了原生支持
2、升級webpack主要部件，包括webpack、webpack-bundle-analyzer、webpack-dev-server、webpack-merge
升級的操作很簡單，先刪除，再安裝即可。但要注意的是webpack4版本中 cli 工具分離成了 webpack 核心庫 與 webpack-cli 命令行工具兩個(gè)模塊，需要使用 CLI ，必安裝 webpack-cli 至項(xiàng)目中
cnpm uninstall -D webpack webpack-bundle-analyzer webpack-dev-server webpack-merge cnpm install -D webpack webpack-cli webpack-bundle-analyzer webpack-dev-server webpack-merge
3、升級webpack相關(guān)插件，包括copy-webpack-plugin、css-loader、eslint-loader、file-loader、html-webpack-plugin、url-loader、friendly-errors-webpack-plugin、optimize-css-assets-webpack-plugin、uglifyjs-webpack-plugin
cnpm uninstall -D copy-webpack-plugin css-loader eslint-loader file-loader html-webpack-plugin url-loader friendly-errors-webpack-plugin optimize-css-assets-webpack-plugin uglifyjs-webpack-plugin cnpm install -D copy-webpack-plugin css-loader eslint-loader file-loader html-webpack-plugin url-loader friendly-errors-webpack-plugin optimize-css-assets-webpack-plugin uglifyjs-webpack-plugin
4、升級vue-loader
由于vue-loader升級到版本15后，配置有較多的變化，穩(wěn)妥起見，可以只將vue-loader升級到14.4.2
cnpm uninstall -D vue-loader cnpm uninstall -D vue-loader@14.4.2
5、替換webpack相關(guān)插件，extract-text-webpack-plugin替換為mini-css-extract-plugin
cnpm uninstall -D extract-text-webpack-plugin
cnpm install -D mini-css-extract-plugin
配置
下面對配置文件的修改進(jìn)行詳細(xì)說明：
1、webpack.base.conf.js文件
增加node:process.env.NODE_ENV即可
module.exports = {
+ mode: process.env.NODE_ENV,
...
2、webpack.prop.conf.js文件
該文件的配置項(xiàng)較為復(fù)雜
（1）將ExtractTextPlugin替換為MiniCssExtraPlugin
+ const MiniCssExtractPlugin = require("mini-css-extract-plugin")
- const ExtractTextPlugin = require('extract-text-webpack-plugin')
...
- new ExtractTextPlugin({
+ new MiniCssExtractPlugin({
filename: utils.assetsPath('css/[name].[contenthash].css'),
allChunks: true,
}),
...
（2）刪除UglifyJsPlugin配置項(xiàng)
- const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
...
- new UglifyJsPlugin({
- uglifyOptions: {
- compress: {
- warnings: false
- }
- },
- sourceMap: config.build.productionSourceMap,
- parallel: true
- })
（3）刪除CommonsChunkPlugin配置項(xiàng)
- new webpack.optimize.CommonsChunkPlugin({
- name: 'vendor',
- minChunks (module) {
- return (
- module.resource &&
- /\.js$/.test(module.resource) &&
- module.resource.indexOf(
- path.join(__dirname, '../node_modules')
- ) === 0
- )
- }
- }),
- new webpack.optimize.CommonsChunkPlugin({
- name: 'manifest',
- minChunks: Infinity
- }),
- new webpack.optimize.CommonsChunkPlugin({
- name: 'app',
- async: 'vendor-async',
- children: true,
- minChunks: 3
- }),
...
（4）添加optimization配置項(xiàng)
+ optimization: {
+ splitChunks: {
+ chunks: 'async',
+ minSize: 30000,
+ minChunks: 1,
+ maxAsyncRequests: 5,
+ maxInitialRequests: 3,
+ automaticNameDelimiter: '~',
+ name: true,
+ cacheGroups: {
+ vendors: {
+ test: /[\\/]node_modules[\\/]/,
+ priority: -10
+ },
+ default: {
+ minChunks: 2,
+ priority: -20,
+ reuseExistingChunk: true
+ }
+ }
+ },
+ runtimeChunk: { name: 'runtime' }
+ },
詳細(xì)配置移步前端小站源碼
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
JavaScript地圖拖動(dòng)功能SpryMap的簡單實(shí)現(xiàn)
SpryMap是一個(gè)獨(dú)立的并且是輕量級的JavaScript類庫，它不依賴于任何其他的JS框架2013-07-07
下拉框想必大家都有見過，可編輯的下拉框就不多見了吧，本例為大家介紹個(gè)不錯(cuò)的實(shí)現(xiàn)方法，需要的朋友可以參考下2014-06-06
新浪滑門技術(shù)...2007-01-01
最近這幾天在升級自己的MVVM 框架,遇到很多小問題,所以想著就在這里統(tǒng)一解決了。文中主要介紹了關(guān)于Javascript中with的替代方法與String中的正則方法，有需要的朋友們可以參考借鑒，下面來一起看看吧。2016-12-12
JS使用位運(yùn)算實(shí)現(xiàn)權(quán)限組合的代碼示例
在業(yè)務(wù)開發(fā)中我們經(jīng)常會(huì)遇到處理不同權(quán)限的情況,例如根據(jù)用戶角色是否有編輯權(quán)限來展示和隱藏一個(gè)按鈕,或者一個(gè)函數(shù)根據(jù)傳入的配置項(xiàng)來執(zhí)行不同的邏輯,也就是所謂的權(quán)限控制,所以本文給大家介紹了JS使用位運(yùn)算實(shí)現(xiàn)權(quán)限組合,需要的朋友可以參考下2024-07-07
本文給大家分享的是一段仿騰訊微博的無刷新刪除特效的代碼，非常的實(shí)用，有需要的小伙伴可以參考下。2015-04-04
實(shí)例講解javascript實(shí)現(xiàn)異步圖片上傳方法
給大家詳細(xì)講解一下如何通過javascript寫出異步圖片上傳，并且把實(shí)例代碼給大家分享了下，有興趣的讀者們測試一下吧。2017-12-12
這篇文章主要介紹了JavaScript箭頭函數(shù)中的this詳解,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，,需要的朋友可以參考下2019-06-06
使用js操作css屬性的寫法是有一定的規(guī)律的2008-11-11
Bootstrap?按鈕下拉菜單的實(shí)現(xiàn)示例
本文主要介紹了Bootstrap?按鈕下拉菜單的實(shí)現(xiàn)示例，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07