loader 被用于轉換某些類型的模塊，而插件則可以用于執行范圍更廣的任務。插件的范圍包括，從打包優化和壓縮，一直到重新定義環境中的變量。插件接口功能極其強大，可以用來處理各種各樣的任務。 想要使用一個插件，你只需要 require() 它，然后把它添加到 plugins 數組中。多數插件可以通過選項(option)自定義。你也可以在一個配置文件中因為不同目的而多次使用同一個插件，這時需要通過使用 new 操作符來創建它的一個實例。 ~~~ const HtmlWebpackPlugin = require('html-webpack-plugin'); // 通過 npm 安裝 const webpack = require('webpack'); // 用于訪問內置插件 const config = { module: { rules: [ { test: /\.txt$/, use: 'raw-loader' } ] }, plugins: [ new webpack.optimize.UglifyJsPlugin(), new HtmlWebpackPlugin({template: './src/index.html'}) ] }; module.exports = config; webpack 提供許多開箱可用的插件！查閱我們的 ~~~ 很少有 webpack 配置看起來很完全相同。這是因為 webpack 的配置文件，是導出一個對象的 JavaScript 文件。此對象，由 webpack 根據對象定義的屬性進行解析。 因為 webpack 配置是標準的 Node.js CommonJS 模塊，你可以做到以下事情： * 通過 require(...) 導入其他文件 * 通過 require(...) 使用 npm 的工具函數 * 使用 JavaScript 控制流表達式，例如 ?: 操作符 * 對常用值使用常量或變量 * 編寫并執行函數來生成部分配置 * 請在合適的時機使用這些特性。 雖然技術上可行，但應避免以下做法： * 在使用 webpack 命令行接口(CLI)（應該編寫自己的命令行接口(CLI)，或使用 --env）時，訪問命令行接口(CLI)參數 * 導出不確定的值（調用 webpack 兩次應該產生同樣的輸出文件） * 編寫很長的配置（應該將配置拆分為多個文件） * 你需要從這份文檔中收獲最大的點，就是你的 webp