webpack 之深入瞭解

概念

	webpack 是一個現代 JavaScript 應用程序的靜態模塊打包器(module bundler)。當 webpack 處理應用程序時，它會遞歸地構建一個依賴關係圖(dependency graph)，其中包含應用程序需要的每個模塊，然後將所有這些模塊打包成一個或多個 bundle。
	
	從 webpack v4.0.0 開始，可以不用引入一個配置文件。在開始前你需要先理解四個核心概念：
	入口(entry)    輸出(output)	  loader   	插件 (plugins)

入口（entry）

指示 webpack 應該使用哪個模塊，來作爲構建其內部依賴圖的開始。進入入口起點後，webpack 會找出有哪些模塊和庫是入口起點（直接和間接）依賴的。

每個依賴項隨即被處理，最後輸出到稱之爲 bundles 的文件中

可以通過在 webpack 配置中配置 entry 屬性，來指定一個入口起點（或多個入口起點）。默認值爲 ./src。

webpack.config.js

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

出口(output)

告訴 webpack 在哪裏輸出它所創建的 bundles，以及如何命名這些文件，默認值爲 ./dist。基本上，整個應用程序結構，都會被編譯到你指定的輸出路徑的文件夾中。你可以通過在配置中指定一個 output 字段，來配置這些處理過程：

webpack.config.js

const path = require('path');

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

我們通過 output.filename 和 output.path 屬性，來告訴 webpack bundle 的名稱，以及我們想要 bundle 生成(emit)到哪裏。
path 模塊是一個 Node.js 核心模塊，用於操作文件路徑。

loader

讓 webpack 能夠去處理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）。loader 可以將所有類型的文件轉換爲 webpack 能夠處理的有效模塊，然後你就可以利用 webpack 的打包能力，對它們進行處理。

本質上，webpack loader 將所有類型的文件，轉換爲應用程序的依賴圖（和最終的 bundle）可以直接引用的模塊。

在更高層面，在 webpack 的配置中 loader 有兩個目標：
	test 屬性，用於標識出應該被對應的 loader 進行轉換的某個或某些文件。
	use 屬性，表示進行轉換時，應該使用哪個 loader。

webpack.config.js

const path = require('path');

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

module.exports = config;

	對一個單獨的 module 對象定義了 rules 屬性，裏面包含兩個必須屬性：test 和 use。這告訴 webpack 編譯器(compiler) 如下信息：webpack 編譯器，當你碰到「在 require()/import 語句中被解析爲 '.txt' 的路徑」時，在你對它打包之前，先使用 raw-loader 轉換一下。”

插件(plugins)

loader 被用於轉換某些類型的模塊，而插件則可以用於執行範圍更廣的任務。插件的範圍包括，從打包優化和壓縮，一直到重新定義環境中的變量。插件接口功能極其強大，可以用來處理各種各樣的任務。

使用一個插件，你只需要 require() 它，然後把它添加到 plugins 數組中。多數插件可以通過選項(option)自定義。你也可以在一個配置文件中因爲不同目的而多次使用同一個插件，這時需要通過使用 new 操作符來創建它的一個實例。

webpack.config.js

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

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

module.exports = config;

常用插件 ： https://www.webpackjs.com/plugins/

模式

通過選擇 development 或 production 之中的一個，來設置 mode 參數，你可以啓用相應模式下的 webpack 內置的優化

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

development
	會將 process.env.NODE_ENV 的值設爲 development。啓用 NamedChunksPlugin 和 NamedModulesPlugin。
production
	會將 process.env.NODE_ENV 的值設爲 production。啓用 FlagDependencyUsagePlugin, FlagIncludedChunksPlugin, ModuleConcatenationPlugin, NoEmitOnErrorsPlugin, OccurrenceOrderPlugin, SideEffectsFlagPlugin 和 UglifyJsPlugin.