1. <wbr id="m8vu6"></wbr>

      <del id="m8vu6"><center id="m8vu6"><source id="m8vu6"></source></center></del>
        <p id="m8vu6"><sub id="m8vu6"></sub></p>

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

        前面的話

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

         

        概述

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

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

        【0配置】

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

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

        【模塊類型】

          webpack4提供了5種模塊類型

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

          包括生產環境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 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' }
        +  },
        復制代碼

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

        相關教程
                
        免费看成年人视频大全_免费看成年人视频在线观看