WEBPACK

Turbo 發(fā)布于2019-08-23 16:30 / 1519人閱讀

摘要：主要輸出文件的默認(rèn)值是，其他生成文件默認(rèn)放置在文件夾中。讓能夠去處理其他類型的文件，并將它們轉(zhuǎn)換為有效模塊，以供應(yīng)用程序使用，以及被添加到依賴圖中。屬性，表示進(jìn)行轉(zhuǎn)換時(shí)，應(yīng)該使用哪個(gè)。

本質(zhì)上，webpack 是一個(gè)現(xiàn)代 JavaScript 應(yīng)用程序的靜態(tài)模塊打包工具。當(dāng) webpack 處理應(yīng)用程序時(shí)，它會(huì)在內(nèi)部構(gòu)建一個(gè) 依賴圖(dependency graph)，此依賴圖會(huì)映射項(xiàng)目所需的每個(gè)模塊，并生成一個(gè)或多個(gè) bundle。
從 v4.0.0 開(kāi)始，webpack 可以不用再引入一個(gè)配置文件來(lái)打包項(xiàng)目，然而，但它仍然有著高度可配置性，可以很好滿足你的需求。

核心概念

入口(entry)

輸出(output)

loader

插件(plugin)

模式(mode)

瀏覽器的兼容性(browser compatibility)

入口[entry]

入口起點(diǎn)(entry point)指示 webpack 應(yīng)該使用哪個(gè)模塊,來(lái)作為其內(nèi)部依賴圖的開(kāi)始。

默認(rèn)值是 ./src/index.js，但你可以通過(guò)在 webpack configuration 中配置 entry 屬性，來(lái)指定一個(gè)（或多個(gè)）不同的入口起點(diǎn)。
webpack.config.js

module.exports = {
  entry: "./path/to/my/entry/file.js"
};

輸出[output]

output 屬性告訴 webpack 在哪里輸出它所創(chuàng)建的 bundle，以及如何命名這些文件。主要輸出文件的默認(rèn)值是 ./dist/main.js，其他生成文件默認(rèn)放置在 ./dist 文件夾中。

const path = require("path"); //可能你想要了解在代碼最上面導(dǎo)入的 path 模塊是什么，它是一個(gè) Node.js 核心模塊，用于操作文件路徑。

module.exports = {
  entry: "./path/to/my/entry/file.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "my-first-webpack.bundle.js"
  }
};

loader

webpack 只能理解 JavaScript 和 JSON 文件。loader 讓 webpack 能夠去處理其他類型的文件，并將它們轉(zhuǎn)換為有效模塊，以供應(yīng)用程序使用，以及被添加到依賴圖中。
在更高層面，在 webpack 的配置中 loader 有兩個(gè)屬性：

test 屬性，用于標(biāo)識(shí)出應(yīng)該被對(duì)應(yīng)的 loader 進(jìn)行轉(zhuǎn)換的某個(gè)或某些文件。

use 屬性，表示進(jìn)行轉(zhuǎn)換時(shí)，應(yīng)該使用哪個(gè) loader。

const path = require("path");

module.exports = {
  output: {
    filename: "my-first-webpack.bundle.js"
  },
  module: {
    rules: [
      { test: /.txt$/, use: "raw-loader" }
    ]
  }
};

插件[plugin]

loader 用于轉(zhuǎn)換某些類型的模塊，而插件則可以用于執(zhí)行范圍更廣的任務(wù)。包括：打包優(yōu)化，資源管理，注入環(huán)境變量。

想要使用一個(gè)插件，你只需要 require() 它，然后把它添加到 plugins 數(shù)組中。多數(shù)插件可以通過(guò)選項(xiàng)(option)自定義。你也可以在一個(gè)配置文件中因?yàn)椴煌康亩啻问褂猛粋€(gè)插件，這時(shí)需要通過(guò)使用 new 操作符來(lái)創(chuàng)建它的一個(gè)實(shí)例。

const HtmlWebpackPlugin = require("html-webpack-plugin"); // 通過(guò) npm 安裝
const webpack = require("webpack"); // 用于訪問(wèn)內(nèi)置插件

module.exports = {
  module: {
    rules: [
      { test: /.txt$/, use: "raw-loader" }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({template: "./src/index.html"})
  ]
};

模式[mode]

通過(guò)選擇 development, production 或 none 之中的一個(gè)，來(lái)設(shè)置 mode 參數(shù)，你可以啟用 webpack 內(nèi)置在相應(yīng)環(huán)境下的優(yōu)化。其默認(rèn)值為 production。

module.exports = {
  mode: "production"
};

const path = require("path");

module.exports = {
  mode: "production", // "production" | "development" | "none"  // Chosen mode tells webpack to use its built-in optimizations accordingly.
  entry: "./app/entry", // string | object | array  // 默認(rèn)為 "./src"
  // 這里應(yīng)用程序開(kāi)始執(zhí)行
  // webpack 開(kāi)始打包
  output: {
    // webpack 如何輸出結(jié)果的相關(guān)選項(xiàng)
    path: path.resolve(__dirname, "dist"), // string
    // 所有輸出文件的目標(biāo)路徑
    // 必須是絕對(duì)路徑（使用 Node.js 的 path 模塊）
    filename: "bundle.js", // string    // 「入口分塊(entry chunk)」的文件名模板
    publicPath: "/assets/", // string    // 輸出解析文件的目錄，url 相對(duì)于 HTML 頁(yè)面
    library: "MyLibrary", // string,
    // 導(dǎo)出庫(kù)(exported library)的名稱
    libraryTarget: "umd", // 通用模塊定義    // 導(dǎo)出庫(kù)(exported library)的類型
    /* 高級(jí)輸出配置（點(diǎn)擊顯示） */  },
  module: {
    // 關(guān)于模塊配置
    rules: [
      // 模塊規(guī)則（配置 loader、解析器等選項(xiàng)）
      {
        test: /.jsx?$/,
        include: [
          path.resolve(__dirname, "app")
        ],
        exclude: [
          path.resolve(__dirname, "app/demo-files")
        ],
        // 這里是匹配條件，每個(gè)選項(xiàng)都接收一個(gè)正則表達(dá)式或字符串
        // test 和 include 具有相同的作用，都是必須匹配選項(xiàng)
        // exclude 是必不匹配選項(xiàng)（優(yōu)先于 test 和 include）
        // 最佳實(shí)踐：
        // - 只在 test 和 文件名匹配 中使用正則表達(dá)式
        // - 在 include 和 exclude 中使用絕對(duì)路徑數(shù)組
        // - 盡量避免 exclude，更傾向于使用 include
        issuer: { test, include, exclude },
        // issuer 條件（導(dǎo)入源）
        enforce: "pre",
        enforce: "post",
        // 標(biāo)識(shí)應(yīng)用這些規(guī)則，即使規(guī)則覆蓋（高級(jí)選項(xiàng)）
        loader: "babel-loader",
        // 應(yīng)該應(yīng)用的 loader，它相對(duì)上下文解析
        // 為了更清晰，`-loader` 后綴在 webpack 2 中不再是可選的
        // 查看 webpack 1 升級(jí)指南。
        options: {
          presets: ["es2015"]
        },
        // loader 的可選項(xiàng)
      },
      {
        test: /.html$/,
        use: [
          // 應(yīng)用多個(gè) loader 和選項(xiàng)
          "htmllint-loader",
          {
            loader: "html-loader",
            options: {
              /* ... */
            }
          }
        ]
      },
      { oneOf: [ /* rules */ ] },
      // 只使用這些嵌套規(guī)則之一
      { rules: [ /* rules */ ] },
      // 使用所有這些嵌套規(guī)則（合并可用條件）
      { resource: { and: [ /* 條件 */ ] } },
      // 僅當(dāng)所有條件都匹配時(shí)才匹配
      { resource: { or: [ /* 條件 */ ] } },
      { resource: [ /* 條件 */ ] },
      // 任意條件匹配時(shí)匹配（默認(rèn)為數(shù)組）
      { resource: { not: /* 條件 */ } }
      // 條件不匹配時(shí)匹配
    ],
    /* 高級(jí)模塊配置（點(diǎn)擊展示） */  },
  resolve: {
    // 解析模塊請(qǐng)求的選項(xiàng)
    // （不適用于對(duì) loader 解析）
    modules: [
      "node_modules",
      path.resolve(__dirname, "app")
    ],
    // 用于查找模塊的目錄
    extensions: [".js", ".json", ".jsx", ".css"],
    // 使用的擴(kuò)展名
    alias: {
      // 模塊別名列表
      "module": "new-module",
      // 起別名："module" -> "new-module" 和 "module/path/file" -> "new-module/path/file"
      "only-module$": "new-module",
      // 起別名 "only-module" -> "new-module"，但不匹配 "only-module/path/file" -> "new-module/path/file"
      "module": path.resolve(__dirname, "app/third/module.js"),
      // 起別名 "module" -> "./app/third/module.js" 和 "module/file" 會(huì)導(dǎo)致錯(cuò)誤
      // 模塊別名相對(duì)于當(dāng)前上下文導(dǎo)入
    },
    /* 可供選擇的別名語(yǔ)法（點(diǎn)擊展示） */
    /* 高級(jí)解析選項(xiàng)（點(diǎn)擊展示） */  },
  performance: {
    hints: "warning", // 枚舉    maxAssetSize: 200000, // 整數(shù)類型（以字節(jié)為單位）
    maxEntrypointSize: 400000, // 整數(shù)類型（以字節(jié)為單位）
    assetFilter: function(assetFilename) {
      // 提供資源文件名的斷言函數(shù)
      return assetFilename.endsWith(".css") || assetFilename.endsWith(".js");
    }
  },
  devtool: "source-map", // enum  // 通過(guò)在瀏覽器調(diào)試工具(browser devtools)中添加元信息(meta info)增強(qiáng)調(diào)試
  // 犧牲了構(gòu)建速度的 `source-map" 是最詳細(xì)的。
  context: __dirname, // string（絕對(duì)路徑！）
  // webpack 的主目錄
  // entry 和 module.rules.loader 選項(xiàng)
  // 相對(duì)于此目錄解析
  target: "web", // 枚舉  // bundle 應(yīng)該運(yùn)行的環(huán)境
  // 更改 塊加載行為(chunk loading behavior) 和 可用模塊(available module)
  externals: ["react", /^@angular//],  // 不要遵循/打包這些模塊，而是在運(yùn)行時(shí)從環(huán)境中請(qǐng)求他們
  serve: { //object
    port: 1337,
    content: "./dist",
    // ...
  },
  // 為 webpack-serve 提供選項(xiàng)
  stats: "errors-only",  // 精確控制要顯示的 bundle 信息
  devServer: {
    proxy: { // proxy URLs to backend development server
      "/api": "http://localhost:3000"
    },
    contentBase: path.join(__dirname, "public"), // boolean | string | array, static file location
    compress: true, // enable gzip compression
    historyApiFallback: true, // true for index.html upon 404, object for multiple paths
    hot: true, // hot module replacement. Depends on HotModuleReplacementPlugin
    https: false, // true for self-signed, object for cert authority
    noInfo: true, // only errors & warns on hot reload
    // ...
  },
  plugins: [
    // ...
  ],
  // 附加插件列表
  /* 高級(jí)配置（點(diǎn)擊展示） */}