Webpack進階第六節---插件(plugins)

插件(Plugins)是用來拓展Webpack功能的，它們會在整個構建過程中生效，執行相關的任務。Loders和Plugins常常被弄混，但是他們其實是完全不同的東西，可以這麼來說，Loders是在打包構建過程中用來處理源文件的(JSX,Scss,Less),一次處理一個，插件並不直接操作單個文件，它直接對整個構建過程起作用。

Webpack有很多內置插件，同時也有很多第三方插件，可以讓我們完成更加豐富的功能。

要使用某個插件，我們需要通過npm安裝它，然後要做的就是在webpack配置中的plugins關鍵字部分添加該插件的一個實例（plugins是一個數組）繼續上面的例子，我們添加了一個給打包後代碼添加版權聲明的插件。

const webpack = require('webpack');

module.exports = {
...
    module: {
        rules: [
            {
                test: /(\.jsx|\.js)$/,
                use: {
                    loader: "babel-loader"
                },
                exclude: /node_modules/
            },
            {
                test: /\.css$/,
                use: [
                    {
                        loader: "style-loader"
                    }, {
                        loader: "css-loader",
                        options: {
                            modules: true
                        }
                    }, {
                        loader: "postcss-loader"
                    }
                ]
            }
        ]
    },
    plugins: [
        new webpack.BannerPlugin('版權所有，翻版必究')
    ],
};