webpack4打包css中引用的图片

使用file-loader和url-loader

npm install --save-dev file-loader url-loader

配置文件：

const path = require("path");
const uglifyjs = require('uglifyjs-webpack-plugin'); //压缩js插件
const HtmlWebpackPlugin = require('html-webpack-plugin'); //打包html插件
const MiniCssExtractPlugin = require("mini-css-extract-plugin"); //打包css插件
module.exports = {
    mode: "development", //打包为开发模式
    entry: "./src/js/main", //入口文件,从项目根目录指定
    output: { //输出路径和文件名，使用path模块resolve方法将输出路径解析为绝对路径
        path: path.resolve(__dirname, "../dist/js"), //将js文件打包到dist/js的目录
        filename: "main.js" 
    },
    module: {
      rules:[
        //打包css的图片，图片大小小于limit设置的8192B的会转化成base字符串引入，减少请求
        {
          test: /\.(png|jpg|gif|jpeg)$/,
              use: [
                {
                  loader: 'url-loader',
                  options: {
                    limit:8192,
                    outputPath:'../img/'
                  }
                }
              ]
        },
        {
          test: /\.css$/,
          use: [
            MiniCssExtractPlugin.loader,
            {
                loader: "css-loader",
                options: {
                  minimize: true
                }
            },
          ]
        }
      ]
    },  
  plugins: [
  	new HtmlWebpackPlugin({
	    title: 'Custom template',
	    template: './src/index.html', //指定要打包的html路径和文件名
	    filename:'../index.html' //指定输出路径和文件名
	  }),
    new uglifyjs(),
    new MiniCssExtractPlugin({
      filename: "../css/styles.css" //如果需要将css文件单独放入css文件夹中需要../
    })
  ]
}

最终输出目录：