webpack小概念&&webpack插件總結
在webpack中，只能讀取javascript和json檔案，那么我們專案中的css，img等等在打包構建的時候怎么辦呢？
webpack給我們提供了一個loader模塊去處理，它可以讓webpack去處理其他型別的檔案然后轉為可被讀取的有效模塊，讓程式正常運行~
當使用loader模塊處理之后，你發現每一次打包都需要重復進行某些操作，
例如：每次打包都生成不同的dist目錄，而你就只是需要最新的那一個dist檔案，這個時候，我們就需要插件（plugin）來幫我們做一些處理了，（vue腳手架同樣幫我們做了相對應處理）
插件則可以用于執行范圍更廣的任務，包括：打包優化，資源管理，注入環境變數，
上面這句話是webpack中文檔案對于插件(plugin)的一個概念描述，
以上是loader和plugin的一些概念，
接下來先講講webpack的loader模塊
在loader中，有test和use兩個屬性，
test：其實就是讓你告訴webpack打包構建的時候遇到哪些型別的檔案需要進行處理或者轉換，
use：告訴webpack使用哪個loader模塊對上面test指定的檔案型別進行處理，
舉個小栗子
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
options: vueLoaderConfig
}
]
像上面這一小塊代碼，其實就是在webpack的module中配置一下正則，告訴webpack當你打包編譯遇到.vue檔案的時候使用vue-loader這一個loader模塊進行轉換處理，當然options是一些簡單的配置項，（里面其實就是通過判斷開發環境還是生產環境執行相對應規則）
{
test: /\.js$/,
loader: 'babel-loader',
include: [resolve('src'), resolve('test')]
}
再來看一個，像這一個的話其實就是告訴webpack打包編譯的時候，遇到.js的檔案使用babel-loader模塊去轉換，然后比上面多了一個include，其實就是告訴webpack，哪些目錄中的 .js 檔案需要進行 babel-loader，
更多具體的配置可以看webpack中文檔案：https://v4.webpack.docschina.org/concepts/loaders
接下來介紹一下幾個webpack插件：
1、html-webpack-plugin
主要作用是生產html檔案，在entry配置中配置入口模板，編譯打包后的內容會在此模板上插入內容，
配置項inject：
默認值是true：表示script標簽將插入在body底部
值為body：效果和true一樣，
值為head：script 標簽位于 head 標簽內
值為false：不插入生成的 js 檔案，只是單純的生成一個 html 檔案
2、HotModuleReplacementPlugin
這是一個熱更新模塊，依賴于webpack-dev-server，
webpack-dev-server打包時候會更新打包檔案或者重繪整個頁面，而HotModuleReplacementPlugin可以做到只修改改變的那部分，
//用法：
plugins: [
new webpack.HotModuleReplacementPlugin()
]
3、clean-webpack-plugin
會根據 output.path 自動清理專案生成的 bundle 檔案，
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
plugins: [
new HtmlWebpackPlugin({
template: path.join(__dirname, '/index.html'),
}),
new CleanWebpackPlugin(), // 所要清理的檔案夾名稱
]
4、mini-css-extract-plugin
對每個包含 css 的 js 檔案都會創建一個 CSS 檔案，提取為獨立的css檔案，
這個插件應該只用在生產環境配置，并且在 loaders 鏈中不使用 style-loader, 而且這個插件暫時不支持 HMR
5、optimize-css-assets-webpack-plugin
作用是打包壓縮減少css的體積，
const OptimizeCSSPlugin= require(“optimize-css-assets-webpack-plugin”) // 壓縮css代碼
optimization: {
minimizer: [
// 壓縮css
new OptimizeCSSPlugin({})
]
}
6、DefinePlugin
可以通過DefinePlugin定義一些全域變數,
plugins: [
new webpack.DefinePlugin({
'process.env': ABCD
})
]
在node環境中，也可以通過process.env定義和拿到全域變數，
在vue和react中，可以通過.env.development和.env.production 去定義，然后通過process.env使用全域變數，
7、DLLPlugin
這個插件件會生成一個名為 manifest.json 的檔案，創建一個只有 dll 的bundle，將DLLReferencePlugin 映射到相關的依賴上，
new webpack.DllPlugin({
path: path.join(dllDirPath, '[name].manifest.json'),
name: '_dll_[name]', // 和library 一致，輸出的manifest.json中的name值
}),
更多插件可以查看webpack官方檔案：https://v4.webpack.docschina.org/plugins
以上僅為個人見解，有不對的歡迎交流指出~
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/272255.html
標籤：其他