webpack4.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進行查看。

這是我第一次玩博客，希望各位多多指教，有錯的地方請幫忙指正！謝謝