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

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