mini-css-extract-plugin的背景图的解决方法及css文件夹

    今天看了一下npm官网发现webpack4.x的mini-css-extract-plugin已经可以宰了，然后Dome走起；

首先看一下官网给出的栗子：

 

const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {

  optimization: {

    splitChunks: {

      cacheGroups: {

        styles: {

          name: 'styles',

          test: /\.css$/,

          chunks: 'all',

          enforce: true

        }

      }

    }

  },

  plugins: [

    new MiniCssExtractPlugin({

      filename: "[name].css",

    })

  ],

  module: {

    rules: [

      {

        test: /\.css$/,

        use: [

          MiniCssExtractPlugin.loader,

          "css-loader"

        ]

      }

    ]

  }

}

对比以前添多了个optimization属性，通过测试发现直接对optimization.splitChunks.cacheGroups.styles.name更改

 

optimization: {

    splitChunks: {

      cacheGroups: {

        styles: {

          name: 'css/styles',

          test: /\.css$/,

          chunks: 'all',

          enforce: true

        }

      }

    }

  }

加上css前缀直接生成css文件夹

 

然后处理图片

下载url-loader及file-loader 并使用

$ npm i url-loader file-loader -D

 

module:{
    rules:[
        {
            test:/\.(jpg|png|gif)$/,
            use:[{
                    loader:"url-loader",
                    options:{
                        limit:50,
                        outputPath:"images"
                    }
                }]
        }
    ]
}

生成images文件夹

但是到这里有一个问题，生产的css文集里背景图片路径不对

最后做出修正如下

 

const path = require("path");
const htmlwebpackplugin = require("html-webpack-plugin");
const cleanwebpackplugin = require("clean-webpack-plugin");
const webpack = require("webpack");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
    entry:{
        index1:"./src/index.js"
    },
    output:{
        path:path.resolve(__dirname,"dist"),
        filename:"[name].js"
    },
    optimization: {
        splitChunks: {
            cacheGroups: {
                styles: {
                    name: 'css/index',
                    test: /\.css$/,
                    chunks: 'all',
                    enforce: true
                }
            }
        }
    },
    module:{
        rules:[
            {
                test:/\.css$/,
                use: [
                    {
                        loader:MiniCssExtractPlugin.loader,
                        options:{
                            publicPath: '../'
                        }
                    },
                    "css-loader"
                ]
            },
            {
                test:/\.(jpg|png|gif)$/,
                use:[{
                        loader:"url-loader",
                        options:{
                            limit:50,
                            outputPath:"images"
                        }
                    }]
            }
        ]
    },
    plugins:[
        new cleanwebpackplugin(["dist"]),
        new webpack.HotModuleReplacementPlugin(),
        new htmlwebpackplugin({
            minify:{
                collapseWhitespace:true
            },
            title:"首页",
            template:"./src/index.html",
            filename:"index.html"
        }),
        new MiniCssExtractPlugin({
            filename:"[name].css"
        })
    ]
}