很長時間沒有進行webpack打包配置了，想起來都快有些忘記了，這個東西不是經常用到，只有在新建個項目的時候用到，不用官方模板，自己去動手配置的時候，有時候覺得還是有點難度。今天就想著自己動手進行配置一下，可是還是遇到坑了，折騰了一會，現在的webpack版本都4.x了，有些插件都有些改變。 今天就 ...
很長時間沒有進行webpack打包配置了，想起來都快有些忘記了，這個東西不是經常用到，只有在新建個項目的時候用到，不用官方模板，自己去動手配置的時候，有時候覺得還是有點難度。今天就想著自己動手進行配置一下，可是還是遇到坑了，折騰了一會，現在的webpack版本都4.x了，有些插件都有些改變。
今天就遇到了一個問題，打算對js裡面的css進行分離。原本是把css文件引入到index.js入口文件裡面和js一起打包。可是有時候也有這種要求，需要對css文件進行分離打包。這個時候就想到extract-text-webpack-plugin這個插件，可是在使用這個插件之後，webpack打包發生了報錯：
發現原來extract-text-webpack-plugin這個插件都過時了，在webpack4.4.0版本以上的，開始用mini-css-extract-plugin這個分離css的插件了。
npm install --save-dev mini-css-extract-plugin
安裝好這個插件之後，在webpack.config.js中使用:
const MiniCssExtractPlugin = require('mini-css-extract-plugin')//css分離
module: {
rules: [
{
test: /\.css$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
},
"css-loader"
]
},
{
test: /\.(png|jpg|gif)/,
use: [
{
loader: 'url-loader',
options: {
limit: 5000//如果小於則以base64位顯示，大於這個則以圖片路徑顯示
}
}
]
}
]
},
plugins: [
new MiniCssExtractPlugin({
filename: "[name].css",
chunkFilename: "[id].css"
})
],
之後進行webpack打包，這個打包會提示你要安裝webpack-cli依賴，如果沒有安裝這個依賴打包會報錯。
打包之後dist文件下的目錄結構：
分離成功。
最後分享一下mini-css-extract-plugin的鏈接，想好好去學習一下的可以點擊https://www.npmjs.com/package/mini-css-extract-plugin進行查看。
這是我第一次玩博客，希望各位多多指教，有錯的地方請幫忙指正！謝謝
