腳本之家服務器常用軟件

快捷導航

詳解基于Vue cli生成的Vue項目的webpack4升級

更新時間：2018年06月19日 10:37:39 作者：小火柴的藍色理想

這篇文章主要介紹了詳解基于Vue cli生成的Vue項目的webpack4升級，本文將詳細介紹從webpack3到webpack4的升級過程，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

前面的話

本文將詳細介紹從webpack3到webpack4的升級過程

概述

相比于webpack3，webpack4可以零配置運行，打包速度比之前提高了90%，可以直接到ES6的代碼進行無用代碼剔除，新增的optimization使用簡單

在未來，CSS、HTMl和文件都會成為原生模塊

【0配置】

webpack4 設置了默認值，以便無配置啟動項目

entry 默認值是 ./src/
output.path 默認值是 ./dist
mode 默認值是 production

【模塊類型】

webpack4提供了5種模塊類型

json: 可通過 require 和 import 導入的 JSON 格式的數(shù)據(jù)(默認為 .json 的文件)
webassembly: WebAssembly 模塊，（目前是 .wasm 文件的默認類型）
javascript/auto: (webpack 3中的默認類型)支持所有的JS模塊系統(tǒng)：CommonJS、AMD。
javascript/esm: EcmaScript模塊（默認 .mjs 文件）。
javascript/dynamic: 僅支持 CommonJS & AMD。

webpack 4 不僅支持本地處理 JSON，還支持對 JSON 的 Tree Shaking。當使用 ESM 語法 import json 時，webpack 會消除掉JSON Module 中未使用的導出。此外，如果要用 loader 轉換 json 為 js，需要設置 type 為 javascript/auto

模式mode

相比于webpack3，webpack4新增了一個mode配置選擇，用來表示配置模式的選擇情況

module.exports = {
 mode: 'production'
}

包括生產(chǎn)環(huán)境production、開發(fā)環(huán)境devolopment和自定義none這三個選擇可選

【開發(fā)模式】

瀏覽器調試工具
注釋、開發(fā)階段的詳細錯誤日志和提示
快速和優(yōu)化的增量構建機制
開啟 output.pathinfo 在 bundle 中顯示模塊信息
開啟 NamedModulesPlugin
開啟 NoEmitOnErrorsPlugin

【生產(chǎn)模式】

啟用所有優(yōu)化代碼的功能
更小的bundle大小
去除只在開發(fā)階段運行的代碼
關閉內存緩存
Scope hoisting 和 Tree-shaking
開啟 NoEmitOnErrorsPlugin
開啟 ModuleConcatenationPlugin
開啟 optimization.minimize

【none】

禁用所有的默認設置

optimization

從webpack4開始官方移除了commonchunk插件，改用了optimization屬性進行更加靈活的配置，下面來介紹optimization下的一些常用配置項

【minimize】

利用unglifyjsWebpackPlugin插件來壓縮模塊，生產(chǎn)環(huán)境下該值默認為true

optimization: {
  minimize: false
 }

【minimier】

可以使用其他插件來執(zhí)行壓縮功能

const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

module.exports = {
 //...
 optimization: {
  minimizer: [
   new UglifyJsPlugin({ /* your config */ })
  ]
 }
};

【splitChunks】

webpack4默認使用splitChunksPlugin插件來實現(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】

通過設置 runtimeChunk: true 來為每一個入口默認添加一個只包含 runtime 的 chunk

通過提供字符串值，可以使用插件的預設模式

signal: 創(chuàng)建一個被所有生成的塊共享的runtime文件
multiple: 為共同的塊創(chuàng)建多個runtime文件

缺省值為false，表示每個入口塊默認內嵌runtime代碼

runtimeChunk {
   name: "runtime"
  }

【noEmitOnErrors】

只要在編譯時出現(xiàn)錯誤，就使用noEmitOnErrors屬性來跳過emit 階段，用來替代 NoEmitOnErrorsPlugin 插件

【nameModules】

使用可讀的模塊標識，方便更好的調試。webpack在開發(fā)模式下默認開啟，生產(chǎn)模式下默認關閉，用來替代 NamedModulesPlugin 插件

module.exports = {
 //...
 optimization: {
  namedModules: true
 }
};

升級

下面就基于vue-cli的項目對webpack配置進行升級

1、升級nodejs

使用 webpack4 時，必須保證 Node.js 版本 >= 8.9.4，因為 webpack4 使用了大量的ES6語法，這些語法在 nodejs新版 v8 中得到了原生支持

2、升級webpack主要部件，包括webpack、webpack-bundle-analyzer、webpack-dev-server、webpack-merge

升級的操作很簡單，先刪除，再安裝即可。但要注意的是webpack4版本中 cli 工具分離成了 webpack 核心庫與 webpack-cli 命令行工具兩個模塊，需要使用 CLI ，必安裝 webpack-cli 至項目中

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相關插件，包括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相關插件，extract-text-webpack-plugin替換為mini-css-extract-plugin

cnpm uninstall -D extract-text-webpack-plugin

cnpm install -D mini-css-extract-plugin

配置

下面對配置文件的修改進行詳細說明：

1、webpack.base.conf.js文件

增加node:process.env.NODE_ENV即可

module.exports = {
+ mode: process.env.NODE_ENV,
...

2、webpack.prop.conf.js文件

該文件的配置項較為復雜

（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配置項

- const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
...
- new UglifyJsPlugin({
-   uglifyOptions: {
-    compress: {
-     warnings: false
-    }
-   },
-   sourceMap: config.build.productionSourceMap,
-   parallel: true
- })

（3）刪除CommonsChunkPlugin配置項

- 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配置項

+ 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' }
+ },

詳細配置移步前端小站源碼

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: