WEBPACK

本質上，webpack 是一個現代 JavaScript 應用程序的靜態模塊打包工具。當 webpack 處理應用程序時，它會在內部構建一個 依賴圖(dependency graph)，此依賴圖會映射項目所需的每一個模塊，並生成一個或多個 bundle。
從 v4.0.0 開始，webpack 能夠不用再引入一個配置文件來打包項目，然而，但它仍然有着 高度可配置性，能夠很好知足你的需求。

核心概念

• 入口(entry)
• 輸出(output)
• loader
• 插件(plugin)
• 模式(mode)
• 瀏覽器的兼容性(browser compatibility)

入口[entry]

入口起點(entry point)指示 webpack 應該使用哪一個模塊,來做爲其內部依賴圖的開始。

默認值是 ./src/index.js，但你能夠經過在 webpack configuration 中配置 entry 屬性，來指定一個（或多個）不一樣的入口起點。
webpack.config.js

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

輸出[output]

output 屬性告訴 webpack 在哪裏輸出它所建立的 bundle，以及如何命名這些文件。主要輸出文件的默認值是 ./dist/main.js，其餘生成文件默認放置在 ./dist 文件夾中。

const path = require('path'); //可能你想要了解在代碼最上面導入的 path 模塊是什麼，它是一個 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 可以去處理其餘類型的文件，並將它們轉換爲有效 模塊，以供應用程序使用，以及被添加到依賴圖中。
在更高層面，在 webpack 的配置中 loader 有兩個屬性：

1. test 屬性，用於標識出應該被對應的 loader 進行轉換的某個或某些文件。
2. use 屬性，表示進行轉換時，應該使用哪一個 loader。

const path = require('path');

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

插件[plugin]

loader 用於轉換某些類型的模塊，而插件則能夠用於執行範圍更廣的任務。包括：打包優化，資源管理，注入環境變量。

想要使用一個插件，你只須要 require() 它，而後把它添加到 plugins 數組中。多數插件能夠經過選項(option)自定義。你也能夠在一個配置文件中由於不一樣目的而屢次使用同一個插件，這時須要經過使用 new 操做符來建立它的一個實例。

const HtmlWebpackPlugin = require('html-webpack-plugin'); // 經過 npm 安裝
const webpack = require('webpack'); // 用於訪問內置插件

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

模式[mode]

經過選擇 development, production 或 none 之中的一個，來設置 mode 參數，你能夠啓用 webpack 內置在相應環境下的優化。其默認值爲 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  // 默認爲 './src'
  // 這裏應用程序開始執行
  // webpack 開始打包
  output: {
    // webpack 如何輸出結果的相關選項
    path: path.resolve(__dirname, "dist"), // string
    // 全部輸出文件的目標路徑
    // 必須是絕對路徑（使用 Node.js 的 path 模塊）
    filename: "bundle.js", // string    // 「入口分塊(entry chunk)」的文件名模板
    publicPath: "/assets/", // string    // 輸出解析文件的目錄，url 相對於 HTML 頁面
    library: "MyLibrary", // string,
    // 導出庫(exported library)的名稱
    libraryTarget: "umd", // 通用模塊定義    // 導出庫(exported library)的類型
    /* 高級輸出配置（點擊顯示） */  },
  module: {
    // 關於模塊配置
    rules: [
      // 模塊規則（配置 loader、解析器等選項）
      {
        test: /\.jsx?$/,
        include: [
          path.resolve(__dirname, "app")
        ],
        exclude: [
          path.resolve(__dirname, "app/demo-files")
        ],
        // 這裏是匹配條件，每一個選項都接收一個正則表達式或字符串
        // test 和 include 具備相同的做用，都是必須匹配選項
        // exclude 是必不匹配選項（優先於 test 和 include）
        // 最佳實踐：
        // - 只在 test 和 文件名匹配 中使用正則表達式
        // - 在 include 和 exclude 中使用絕對路徑數組
        // - 儘可能避免 exclude，更傾向於使用 include
        issuer: { test, include, exclude },
        // issuer 條件（導入源）
        enforce: "pre",
        enforce: "post",
        // 標識應用這些規則，即便規則覆蓋（高級選項）
        loader: "babel-loader",
        // 應該應用的 loader，它相對上下文解析
        // 爲了更清晰，`-loader` 後綴在 webpack 2 中再也不是可選的
        // 查看 webpack 1 升級指南。
        options: {
          presets: ["es2015"]
        },
        // loader 的可選項
      },
      {
        test: /\.html$/,
        use: [
          // 應用多個 loader 和選項
          "htmllint-loader",
          {
            loader: "html-loader",
            options: {
              /* ... */
            }
          }
        ]
      },
      { oneOf: [ /* rules */ ] },
      // 只使用這些嵌套規則之一
      { rules: [ /* rules */ ] },
      // 使用全部這些嵌套規則（合併可用條件）
      { resource: { and: [ /* 條件 */ ] } },
      // 僅當全部條件都匹配時才匹配
      { resource: { or: [ /* 條件 */ ] } },
      { resource: [ /* 條件 */ ] },
      // 任意條件匹配時匹配（默認爲數組）
      { resource: { not: /* 條件 */ } }
      // 條件不匹配時匹配
    ],
    /* 高級模塊配置（點擊展現） */  },
  resolve: {
    // 解析模塊請求的選項
    // （不適用於對 loader 解析）
    modules: [
      "node_modules",
      path.resolve(__dirname, "app")
    ],
    // 用於查找模塊的目錄
    extensions: [".js", ".json", ".jsx", ".css"],
    // 使用的擴展名
    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" 會致使錯誤
      // 模塊別名相對於當前上下文導入
    },
    /* 可供選擇的別名語法（點擊展現） */
    /* 高級解析選項（點擊展現） */  },
  performance: {
    hints: "warning", // 枚舉    maxAssetSize: 200000, // 整數類型（以字節爲單位）
    maxEntrypointSize: 400000, // 整數類型（以字節爲單位）
    assetFilter: function(assetFilename) {
      // 提供資源文件名的斷言函數
      return assetFilename.endsWith('.css') || assetFilename.endsWith('.js');
    }
  },
  devtool: "source-map", // enum  // 經過在瀏覽器調試工具(browser devtools)中添加元信息(meta info)加強調試
  // 犧牲了構建速度的 `source-map' 是最詳細的。
  context: __dirname, // string（絕對路徑！）
  // webpack 的主目錄
  // entry 和 module.rules.loader 選項
  // 相對於此目錄解析
  target: "web", // 枚舉  // bundle 應該運行的環境
  // 更改 塊加載行爲(chunk loading behavior) 和 可用模塊(available module)
  externals: ["react", /^@angular\//],  // 不要遵循/打包這些模塊，而是在運行時從環境中請求他們
  serve: { //object
    port: 1337,
    content: './dist',
    // ...
  },
  // 爲 webpack-serve 提供選項
  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: [
    // ...
  ],
  // 附加插件列表
  /* 高級配置（點擊展現） */}