Plugin 是用來擴展 Webpack 功能的肠槽，通過在構(gòu)建流程里注入鉤子實現(xiàn)秸仙，它給 Webpack 帶來了很大的靈活性。
const path = require("path");
const ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports =
{
// JavaScript 執(zhí)行入口文件
entry: "./main.js",
output:
{
// 把所有依賴的模塊合并輸出到一個名為 “bundle.js” 文件中
filename: "bundle.js",
// 輸出文件都放到 dist 目錄下
path: path.resolve(__dirname, "./dist")
},
module:
{
rules:
[
{
test: /\.css$/,
loaders: ExtractTextPlugin.extract
({
// 讀取 .css 文件需要的 loader
use: ["css-loader"]
})
}
]
},
plugins:
[
new ExtractTextPlugin
({
// 從 .js 文件提取出來的 .css 文件的名稱
filename: `[name].css`
})
]
};
從以上代碼可以看出炊汤，Webpack 是通過 plugins 屬性來配置需要使用的插件列表的弊攘。plugins 屬性是一個數(shù)組，里面的每一項都是插件的一個實例迈倍。
例如 ExtractTextPlugin 插件的作用就是提取出 JavaScript 代碼里的 CSS 到一個單獨的文件捣域。我們可以通過插件的 filename 屬性告訴插件輸出的 CSS 文件名稱，里面的 [name] 代表文件的名稱焕梅，[contenthash:8] 代表根據(jù)文件內(nèi)容算出的 8 位哈希值，還有更多的選項配置可以在 ExtractTextPlugin 的主頁上查到斜棚。
