VB.net 2010 視頻教程 VB.net 2010 視頻教程 VB.net 2010 視頻教程
SQL Server 2008 視頻教程 c#入門經典教程 Visual Basic從門到精通視頻教程
當前位置:
魔兽世界wow > 網站開發 > JQuery >
  • JavaScript教程之基于Vue cli生成的Vue項目的webpack4升

  • 2019-04-27 14:42 來源:未知

前面的話

魔兽世界wow www.geyjm.icu   本文將詳細介紹從webpack3到webpack4的升級過程

 

概述

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

  在未來,CSS、HTMl和文件都會成為原生???/p>

【0配置】

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

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

【??槔嘈汀?/p>

  webpack4提供了5種??槔嘈?/p>

json: 可通過 require 和 import 導入的 JSON 格式的數據(默認為 .json 的文件)
webassembly: WebAssembly ???,(目前是 .wasm 文件的默認類型)
javascript/auto: (webpack 3中的默認類型)支持所有的JS??橄低常篊ommonJS、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'
}

  包括生產環境production、開發環境devolopment和自定義none這三個選擇可選

【開發模式】

復制代碼
瀏覽器調試工具
注釋、開發階段的詳細錯誤日志和提示
快速和優化的增量構建機制
開啟 output.pathinfo 在 bundle 中顯示??樾畔?
開啟 NamedModulesPlugin
開啟 NoEmitOnErrorsPlugin
復制代碼

【生產模式】

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

【none】

  禁用所有的默認設置

 

optimization

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

【minimize】

  利用unglifyjsWebpackPlugin插件來壓縮???,生產環境下該值默認為true

  optimization: {
    minimize: false
  }

【minimier】

  可以使用其他插件來執行壓縮功能

復制代碼
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

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

【splitChunks】

  webpack4默認使用splitChunksPlugin插件來實現代碼分割功能,來替代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: 創建一個被所有生成的塊共享的runtime文件
multiple: 為共同的塊創建多個runtime文件

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

    runtimeChunk {
      name: "runtime"
    }

【noEmitOnErrors】

  只要在編譯時出現錯誤,就使用noEmitOnErrors屬性來跳過emit 階段,用來替代NoEmitOnErrorsPlugin 插件

【nameModules】

  使用可讀的??楸曄?,方便更好的調試。webpack在開發模式下默認開啟,生產模式下默認關閉,用來替代 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后,配置有較多的變化,穩妥起見,可以只將vue-loader升級到14.4.2

cnpm uninstall -D vue-loader
cnpm uninstall -D [email protected]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文件

  該文件的配置項較為復雜

 ?。?)將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,
    }),
...
復制代碼

 ?。?)刪除UglifyJsPlugin配置項

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

 ?。?)刪除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
-    }), 
...
復制代碼

 ?。?)添加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' }
+  },
復制代碼

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

相關教程