Webpack4文檔

1、webpack基礎介紹

1. webpack是什麼？

本質上，webpack 是一個現代 JavaScript 應用程序的靜態模塊打包工具。

2. 爲何用webpack

原生瀏覽器，不能很好的識別 ES6 以及更高版本中ES moudule模塊引入方式。代碼中使用ES moudule ，能夠經過webpack進行打包編譯成瀏覽器識別的語法。

三、webpack安裝使用的三種方式

• global全局安裝

// 全局安裝
npm install webpack -g
// 全局下打包
webpack index.js
複製代碼

• local項目安裝

// 本地項目安裝
npm install webpack --save-dev
// 本地項目打包
npx webapck index.js //直接執行 npx webpack 會調用默認配置文件 webpck.config.js
複製代碼

• scripts配置安裝

// scripts標籤使用
"scripts": {
    "build": "webpack"
  },
// 本地項目打包
npm run build
複製代碼

四、webpack打包信息分析

2、loader

webpack處理js文件之外的文件時，就須要藉助loader了

webpack 可使用 loader 來預處理文件。這容許你打包除 JavaScript 以外的任何靜態資源。

一、file-loader

將文件發送到輸出文件夾，並返回（相對）URL。 可打包：圖片、text等各類文件

二、url-loader

像 file loader 同樣工做，但若是文件小於限制，能夠返回 data URL 若是小於limit值，直接以base64形式打包到js中，大於和file-loader同樣，生成文件。配合使用，優化。

三、style-loader

將模塊的導出做爲樣式添加到 DOM 中

四、css-loader

解析 CSS 文件後，使用 import 加載，而且返回 CSS 代碼

// importLoaders 用於配置「css-loader 做用於 @import 的資源以前」有多少個 loader。
模塊化打包css文件
use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              importLoaders: 2, // 0 => no loaders (default); 1 => postcss-loader; 2 => postcss-loader, sass-loader
            },
          },
          'postcss-loader',
          'sass-loader',
        ],
複製代碼

// modules 選項啓用/禁用css模塊規範和設置基本行爲。
 options: {
          modules: true,
        },
複製代碼

五、postcss-loader

使用 PostCSS 加載和轉譯 CSS/SSS 文件

3、plugins

webpack 有着豐富的插件接口(rich plugin interface)。webpack 自身的多數功能都使用這個插件接口。這個插件接口使 webpack 變得極其靈活。

一、clean-webpack-plugin

A webpack plugin to remove/clean your build folder(s).

二、HtmlWebpackPlugin

簡單建立 HTML 文件，用於服務器訪問

三、SplitChunksPlugin

此配置對象表示splitchunksplugin的默認行爲。

// webpack.config.js

module.exports = {
  //...
  optimization: {
    splitChunks: {
      chunks: 'async', // 包括：all、async、initial（同步）
      minSize: 30000,
      maxSize: 0,
      minChunks: 1,
      maxAsyncRequests: 5,
      maxInitialRequests: 3,
      automaticNameDelimiter: '~',
      automaticNameMaxLength: 30,
      name: true,
      cacheGroups: {
        vendors: {
          test: /[\\/]node_modules[\\/]/,
          priority: -10
        },
        default: {
          minChunks: 2,
          priority: -20,
          reuseExistingChunk: true
        }
      }
    }
  }
};
複製代碼

4. MiniCssExtractPlugin

這個插件將css提取到單獨的文件中。它爲每一個包含css的js文件建立一個css文件。它支持按需加載css和sourcemap。
它創建在新的webpack v4特性（模塊類型）之上，須要webpack 4才能工做。
與extract-text-webpack-plugin相比：

• Async loading
• No duplicate compilation (performance)
• Easier to use
• Specific to CSS

TODO:

• HMR support

4、開發環境下配置

一、devtool

此選項控制是否生成，以及如何生成 source map。

// 最佳實踐：
development: cheap-module-eval-source-map
production: cheap-module-eval-source-map
複製代碼

二、webpack-dev-server

webpack-dev-server 爲你提供了一個簡單的 web server，而且具備 live reloading(實時從新加載) 功能。

注意:new HtmlWebpackPlugin( { // Also generate a test.html filename: 'index.html', // 使用webapck-dev-server打包至內存，須要index.html template: './index.html' } ),

三、HMR

模塊熱替換(hot module replacement 或 HMR)是 webpack 提供的最有用的功能之一。它容許在運行時更新全部類型的模塊，而無需徹底刷新。

四、babel處理es6

• 補充基礎語法 橋樑：babel-loader @babel/core 處理：@babel/preset-env

5、優化

一、tree shaking

tree shaking 是一個術語，一般用於描述移除 JavaScript 上下文中的未引用代碼(dead-code)。它依賴於 ES2015 模塊語法的 靜態結構 特性，例如 import 和 export。這個術語和概念其實是由 ES2015 模塊打包工具 rollup 普及起來的。

二、Code Splitting

代碼分離是 webpack 中最引人注目的特性之一。此特性可以把代碼分離到不一樣的 bundle 中，而後能夠按需加載或並行加載這些文件。代碼分離能夠用於獲取更小的 bundle，以及控制資源加載優先級，若是使用合理，會極大影響加載時間。

經常使用的代碼分離方法有三種

• 入口起點：使用 entry 配置手動地分離代碼。
• 防止重複：使用 SplitChunksPlugin 去重和分離 chunk。
• 動態導入：經過模塊中的內聯函數調用來分離代碼。

Code splitting這個概念一直都有，並不是webpack首創，只是如今webpack將此功能集成了。 注意： webapck在作代碼分割時，打包同步和異步引入的代碼是有區別的。

1. 打包同步代碼時，只有在配置文件中作配置，webpack纔會將相似lodash的庫文件和業務代碼作分割打包，不然會打包到一個文件中。

// 同步引入
import _ from 'lodash'
_.join(['a', 'b'], '$$')

// webpack.config.js
optimization: {
        splitChunks: {
            chunks: "all"
        }
    },
複製代碼

2. 打包異步引入的代碼時，即便配置文件中沒以設置，webpack也會默認將庫文件和業務代碼分開打包。

// 異步引入
function getComponent() {
    return import('lodash').then(({default: _}) => {
        var element = document.createElement('div')
        element.innerHTML = _.join(['a', 'b'], '$$$')
        return element
    })
}

getComponent().then(element => {
    document.body.appendChild(element)
})
複製代碼

3. Prefetching/Preloading

webpack v4.6.0+ 添加了預取和預加載的支持。

在聲明 import 時，使用下面這些內置指令，可讓 webpack 輸出 "resource hint(資源提示)"，來告知瀏覽器：

• prefetch(預取)：未來某些導航下可能須要的資源
• preload(預加載)：當前導航下可能須要資源

與 prefetch 指令相比，preload 指令有許多不一樣之處：

• preload chunk 會在父 chunk 加載時，以並行方式開始加載。
• prefetch chunk 會在父 chunk 加載結束後開始加載。
• preload chunk 具備中等優先級，並當即下載。prefetch chunk 在瀏覽器閒置時下載。
• preload chunk 會在父 chunk 中當即請求，用於當下時刻。prefetch chunk會用於將來的某個時刻。瀏覽器支持程度不一樣。

三、懶加載

懶加載或者按需加載，是一種很好的優化網頁或應用的方式。這種方式其實是先把你的代碼在一些邏輯斷點處分離開，而後在一些代碼塊中完成某些操做後，當即引用或即將引用另一些新的代碼塊。這樣加快了應用的初始加載速度，減輕了它的整體體積，由於某些代碼塊可能永遠不會被加載。

四、Caching?既然contenthash變了，爲何瀏覽器訪問，仍是不是最新的?

Output Filenames
複製代碼

咱們能夠經過替換output.filename 中的 substitutions 設置，來定義輸出文件的名稱。webpack 提供了一種使用稱爲 substitution(可替換模板字符串) 的方式，經過帶括號字符串來模板化文件名。其中，[contenthash] substitution 將根據資源內容建立出惟一 hash。當資源內容發生變化時，[contenthash] 也會發生變化。

五、Shimming

webpack compiler 可以識別遵循 ES2015 模塊語法、CommonJS 或 AMD 規範編寫的模塊。然而，一些 third party(第三方庫) 可能會引用一些全局依賴（例如 jQuery 中的 $）。所以這些 library 也可能會建立一些須要導出的全局變量。這些 "broken modules(不符合規範的模塊)" 就是 shim(預置依賴) 發揮做用的地方。

六、Environment Variables

想要消除 開發環境 和 生產環境 之間的 webpack.config.js 差別，你可能須要環境變量(environment variable)。

webpack 命令行 環境配置 的 --env 參數，能夠容許你傳入任意數量的環境變量。而在 webpack.config.js 中能夠訪問到這些環境變量。例如--env.production 或 --env.NODE_ENV=local（NODE_ENV 一般約定用於定義環境類型，查看這裏）。

webpack --env.NODE_ENV=local --env.production --progress
複製代碼