安裝

• npm install --save-dev webpack

• npm install --save-dev [email protected]<版本號>

如果版本使用4.0+，需要安裝CLI

• npm install --save-dev webpack-cli

一般來水使用本地安裝，這樣在webpack引入破壞變數的依賴時更容易分別升級專案。

配置指令碼：

        "scripts":{

                "start":"webpack --config webpack.config.js"

        }

webpack環境配置&基本執行

• 初始化配置檔案  npm init -y

• 安裝wenpack及cli  npm install --save-dev webpack & npm install --save-dev  webpack-cli

• 建立專案並新增目錄結構 結構如下：

  • 分發程式碼資料夾  dist

  • 原始碼資料夾      src

  • 初始化檔案  package.json

  • 配置檔案      webpack.config.js

• 執行命令 npx  webpack即可輸出打包程式碼

webpack執行配置

• 在webpack.config.js中配置entry(入口)和output(輸出)

• 在package.json的srcipts中加入項 ["bulid":"webpack"]

• 終端執行 npm run build

注意：

• 在安裝一個要打包到生產環境的安裝包時，要使用 npm install --save。如果要安裝一個用於開發環境的安裝包，要使用npm install --save-dev

• webpack不會更改import和export語句以外的部分。

• 在windows終端通過路徑去呼叫webpack時，必須使用反斜線。列入：node_modules\.bin\webpack --config webpack.config.js。

管理資源

• 動態打包依賴項（建立所謂的依賴圖），可以避免使打包未使用的模組。

• 除了JavaScript之外，還可以通過loader引入其他型別的檔案。

  • 載入css 

    • 命令: npm install --save-dev style-loader css-loader

    • webpack通過正則表示式來確定要查詢的檔案並提供給指定的loader。這種情況下，以.css結尾的所有檔案都將提供給style-loader和css-loader。在webpack.config.js中加入程式碼配置: 

      module: {

      rules: [

      {

      test: /\.css$/,

      use: [

      'style-loader',

      'css-loader'

      ]

      }

      ]

      }

    • 多數情況下可以進行css分離，以便在生產環境下節省載入時間。

    • loader可以支援你想要的任何css處理風格  -postcss，sass和less等。

  • 載入圖片

    • 命令：npm install --save-dev file-loader

    • 在webpack.config.js中加入程式碼配置：

      module: {

      rules: [

      {

      test: /\.(png|svg|jpg|gif)/,

      use: [

      'file-loader'

      ]

      }

      ]

      }

    • 在入口js中匯入圖片

webpack三種常用的程式碼分離

• 入口起點：使用entry配置手動分離程式碼

  • 會出現重複的引用

• 防止重複：使用commonsChunkPlugin去重和分離chunk

  • 該外掛在webpack4.0已經被移除，如果使用改功能，使用SplitChunksPlugin代替

• SplitChunksPlugin

  • chunksFilter: [Function: ASYNC_CHUNK_FILTER],

  • minSize: 0,

  • maxSize: 0,

  • minChunks: 1,

  • maxAsyncRequests: 1,

  • maxInitialRequests: 1,

  • hidePathInfo: false,

  • filename: undefined,

  • getCacheGroups: [Function: fn],

  • automaticNameDelimiter: undefined,

  • fallbackCacheGroup: { minSize: 0, maxSize: 0, automaticNameDelimiter: '~'}

• 動態匯入：通過模組的行內函數呼叫來分離程式碼

  • ECMAScript的import提案

    • import會在內部用到promise，如果舊版本使用import，請使用polyfill來shim   promise  語法：import(相對路徑)

      • ES2015 loader定義的import()，可以在執行時動態載入ES2015模組。改方式不允許定義模組名稱或者其他屬性，但是可以通過註釋接受一些特殊的引數，而無需破壞規定。(註釋引數可以用在提取模組的名稱上面)

    • 由於import函式返回一個promise，因此它可以和函式async一起使用，但是要使用像babel這樣的前處理器和動態匯入babel外掛。

  • webpack特定的require.ensure