1.plugin和loader的區(qū)別
loader:
webpack只能理解JavaScript和JSON文件猜谚。loader讓webpack能夠去處理其他類型的文件掏击，并將它們轉(zhuǎn)換為有效 模塊霎苗，以供應(yīng)用程序使用盏浇，以及被添加到依賴圖中乍丈。
思考如下webpack.config.js配置:
const path = require('path');
module.exports = {
output: {
filename: 'bundle.js'
},
module: {
rules: [
{ test: /\.txt$/, use: 'raw-loader' }
]
}
};
它告訴webpack編譯器在打包過程中衙解，碰到「在 require()/import語句中被解析為'.txt'的路徑」時，在對它打包之前令野，先使用raw-loader轉(zhuǎn)換一下舀患。”
plugin
loader用于轉(zhuǎn)換某些類型的模塊气破，而插件則可以用于執(zhí)行范圍更廣的任務(wù)聊浅。包括：打包優(yōu)化，資源管理现使，注入環(huán)境變量低匙。
思考如下webpack.config.js配置:
const HtmlWebpackPlugin = require('html-webpack-plugin'); // 通過 npm 安裝
const webpack = require('webpack'); // 用于訪問內(nèi)置插件
module.exports = {
module: {
rules: []
},
plugins: [
new HtmlWebpackPlugin({template: './src/index.html'})
]
};
它告訴webpack編譯器在打包過程中需要使用到plugin，而什么時候使用什么plugin碳锈，則根據(jù)plugin的具體實現(xiàn)而定
總結(jié)：
loader用于對模塊源碼的轉(zhuǎn)換顽冶，定義webpack如何處理非javascript模塊，并且在buld中引入這些依賴售碳。loader可以將文件從不同的語言（如TypeScript）轉(zhuǎn)換為JavaScript强重，或者將內(nèi)聯(lián)圖像轉(zhuǎn)換為data URL。而plugin可以解決loader無法實現(xiàn)的其他事贸人，從打包優(yōu)化和壓縮间景，到重新定義環(huán)境變量，功能強大到可以用來處理各種各樣的任務(wù)艺智。
2.使用
以HtmlWebpackPlugin為例拱燃，當我們只使用loader打包時，打包出的文件夾（假設(shè)為輸出路徑名為dist）里并不含有html文件力惯，必須手動復(fù)制到dist文件夾下碗誉，并且手動更改引入的js文件為打包生成的js文件。而HtmlWebpackPlugin可以自動處理這個問題：
const HtmlWebpackPlugin = require('html-webpack-plugin'); // 通過 npm 安裝
const webpack = require('webpack'); // 用于訪問內(nèi)置插件
module.exports = {
entry: 'index.js',
output: {
path: path.resolve(__dirname, './dist'),
filename: 'bundle.js'
},
plugins: [
new HtmlWebpackPlugin()
]
};
執(zhí)行打包后就會在dist目錄下生成index.html：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>webpack App</title>
</head>
<body>
<script src="bundle.js"></script>
</body>
</html>
如果希望使用src下自己的index.html父晶，可以配置：
module.exports = {
entry: 'index.js',
output: {
path: path.resolve(__dirname, './dist'),
filename: 'bundle.js'
},
plugins: [new HtmlWebpackPlugin({
filename: 'bundle.html',//自定義輸出html的名字
template: 'src/index.html'//以自己的html文件為模板
})]
};
該配置代表哮缺，生成之后的文件名為bundle.html，它的內(nèi)容等于在src/index.html文件中自動插入<script src="bundle.js"></script>的結(jié)果
往往一個插件的配置項有很多甲喝，可以在其官方地址查看尝苇，HtmlWebpackPlugin的options文檔地址為：https://github.com/jantimon/html-webpack-plugin#options
這里列舉了很多webpack官方推薦的plugin，常用的除了上面的html-webpack-plugin埠胖，還有：
- clean-webpack-plugin：每次構(gòu)建前清理/dist文件夾糠溜，防止新舊打包生成的代碼混合
- webpack.HotModuleReplacementPlugin：webpack自帶，熱替換插件
- uglifyjs-webpack-plugin：js代碼壓縮
- optimize-css-assets-webpack-plugin：CSS壓縮優(yōu)化
- mini-css-extract-plugin：將CSS提取為獨立的文件的插件直撤，對每個包含css的js文件都會創(chuàng)建一個CSS文件
