Webpack進階第六節---外掛(plugins)
阿新 • • 發佈:2018-12-17
外掛(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('版權所有,翻版必究') ], };