前言
終於開始踩坑webpack了，也算是對自己的一個挑戰吧，在業務還寫不熟練的時候就開始了工程化的探索？也不盡然，畢竟他們也是息息相關的，我對這種東西其實一直都是聽厭煩的，覺得有需要就去查就可以了，但是隨着自己野心越來越大，有些能最方便你一步登天的東西自然要認真去看，webpack無疑是其中的佼佼者。
loader
在學之前，我對於webpack的瞭解很有限，大致集中在entry, output以及越來越健全的默認配置中，要問我現在有什麼感覺，說實話還是沒有什麼感覺，但是想先走一遍然後配着業內最成功的兩個webpack配置，CRA和VueCli來看，說不定到時候會有什麼感覺？
簡單的縷一縷，webpack算是個打包工具，又不侷限於打包工具，如今的前端工程話趨勢已經漸趨成熟，webpack就是整個前端工程化的支柱，基石算不上，但是支柱肯定是名副其實的。
loader作爲webpack非常重要的一部分，它可以對模塊的源代碼進行轉換，使得webpack不只是能夠用來打包js，還可以去加載圖片，css等。
對於打包圖片資源，我們常用的有file-loader和url-loader兩種，後者主要用來將圖片轉爲base64打包進js裏面，而前者則會把圖片和js分開，除此之外具體用法並無差別：
module: {
rules: [
{
test: /\.jpg$/,
use: {
loader: "file-loader",
options: {
name: "[name]_[hash].[ext]",
outputPath: "images/"
}
}
}
]
},
如這般打包出來文件如下：
同時要注意loader執行是有順序的，從下到上，從右到左。
如對於sass文件來說，我們首先要把sass轉換成css，然後再添加樣式，所以loader應該這樣引入:
use: ["style-loader", "css-loader", "sass-loader"]
當然關於樣式打包還不只是這些，常用的如瀏覽器廠商前綴的自動添加，我們就需要再加上:
tyarn add postcss-loader autoprefixer
同時建立一個postcss.config.js的配置文件來寫postcss的配置：
module.exports = {
plugins: [require("autoprefixer")]
};
這樣打包出來的文件就有了廠商前綴。
css-loader
關於css-loader配置，常用的有:
{
loader: "css-loader",
options: {
importLoaders: 2,
modules: true
}
},
前者用來把sass中又引用sass而無法使用postcss -loader等的情況排除，後者使用模塊化引用的方式，用來解決全局樣式和局部樣式的問題。
plugins
最簡單的html-webpack-plugin，可以在打包結束後自動生成html文件，並使得該文件可以自動引用打包好的js文件。
還有clean-webpack-plugin，demo如下：
plugins: [
new HtmlWebpackPlugin({
template: "src/index.html"
}),
new CleanWebpackPlugin()
],
他會自動去output裏面查找要去刪除的輸出文件的目錄，並加以操作，在打包之前便將其刪去。
source map
source map的存在主要是爲了建立開發代碼與打包環境之間的聯繫，使得能夠放在打包環境中的代碼中的錯誤能夠正確的映射到開發代碼中，以便我們可以修改。
簡單的來說，我們如下配置即可：
devtool : 'cheap-module-eval-source-map'
對於生產環境把eval字段去掉。
webpack 權限報錯
使用過程中可能會出現：
webpack is watching the files…
Error: EPERM: operation not permitted, lstat...
類似這樣的權限報錯問題，一般都可以通過sudo來解決，windows上也可以安裝sudo，這篇文章有講到，或者搜一下sudo for windows也可以。
關於webpack-dev-server
Vue和React的官方腳手架都有這個東西的身影，他們的服務器甚至這也是在這個上面定製的，所以這部分算是個科普內容，因爲這玩意已經挺好用了，我們不需要用express配合中間件再寫一個監聽變化自動打包的服務器了。
devServer: {
contentBase: "./dist",
open: true
},
在webpack.config.js 中，通過如上配置可以打開一個端口，當然你需要下載好webpack-dev-server然後使用它。
除此之外我們也有–watch 的做法，看如下package.json：
"scripts": {
"dev": "webpack --watch",
"start": "webpack-dev-server"
},
