The packaged css file after webpack sub-environment configuration cannot replace the correct image path.

this is the source code for the configuration:

const path = require("path")
const webpack = require("webpack")
const CleanWebpackPlugin = require("clean-webpack-plugin")
const ExtractTextPlugin = require("extract-text-webpack-plugin")
const pages = require("../config/pages.config.js")
const merge = require("webpack-merge")

const prodConfig = require("./webpack.prod")
const devConfig = require("./webpack.dev")



const commonConfig = env => {
  // css 
  const ExtractTextSass = new ExtractTextPlugin({
    filename: "static/css/[name].[hash].css"
  })
  //  loader
  //  js laoder
  const scriptLoader = [
    {
      loader: "babel-loader"
    }
  ].concat(env === "prod" 
    ? [] 
    : [{
          loader: "eslint-loader",
          options: {
            formatter: require("eslint-friendly-formatter")
          }
      }]
  )

  const cssLoaders = [
    {
      loader: "style-loader",
      options: {
        sourceMap: env === "dev"
      }
    },
    {
      loader: "postcss-loader",
      options: {
        sourceMap: env === "dev",
        ident: "postcss",
        plugins: [
            require("postcss-cssnext")()
        ]
      }
    },
    {
      loader: "sass-loader",
      options: {
        sourceMap: env === "dev"
      }
    }
  ]

  //   css loader
  const styleLoader = env === "prod"
                              ? ExtractTextSass.extract({
                                fallback: "style-loader",
                                use: cssLoaders.slice(1)  // loader style-loader use styleloader slice 
                              })
                              : [].concat(cssLoaders)




  //  file-loader
  const fileLoaders = env === "dev"
                              ? [{
                                loader: "file-loader",
                                options: {
                                  outputPath: "static/images/",
                                  limit: 5000
                                }
                              }]
                              : [{
                                  loader: "url-loader",
                                  options: {
                                    outputPath: "static/images/",
                                    limit: 5000
                                  }
                                }]


  return {
    entry: pages.entries(),
    output: {
      filename: "static/js/[name].[hash].js",
      path: path.resolve(__dirname, "../dist"), //  
      chunkFilename: "[name][hash:5].chunk.js",
      publicPath: "/"    // cdn 
    },
    plugins: [
      ...pages.htmlPlugin(),

      ExtractTextSass,

      new CleanWebpackPlugin(["dist"], {
        root: path.resolve(__dirname, "../")
      }),

      new webpack.ProvidePlugin({
        // 
        // :
        // $ : "jquery"
        // webpack  "jquery" jquery 
        //  $(...) jquery 
        $: "jquery"
      })
    ],
    module: {
      rules: [
        {
          test: /\.(png|jpg|jpeg|gif|svg)$/,
          use: fileLoaders.concat(env === "prod"
                                            ? [{
                                                loader: "img-loader",
                                                options: {
                                                  pngquant: {
                                                    quality: 80
                                                  }
                                                 }
                                            }]
                                            : []
                                  )
        },
        {
          test: /\.(eot|woff|woff2|ttf|svg)$/,
          use: fileLoaders
        },
        {
          test: /\.scss$/,
          use: styleLoader
        },
        {
          test: /\.js$/,
          use: scriptLoader,
          exclude: /node_modules/
        },
        {
          test: /\.html$/,
          use: [
            {
              loader: "html-loader",
              options: {
                attr: ["img:src"]
              }
            }
          ]
        }
      ]
    },
    resolve: {
        extensions: [".js", ".json", ".css"],
        alias: {
          // 
          "style": path.resolve(__dirname, "../src/style"),

          "module": path.resolve(__dirname, "../src/module")

          //  
          // "jquery.min$": path.resolve(__dirname, "../src/module/libs")
        }
      }
    }
 }

 module.exports = env => {
    let config = env === "prod"
    ? prodConfig
    : devConfig


    return merge(commonConfig(env), config)
 }

I don"t know if there is any mistake or omission according to the tutorials of Mu course net

Mar.03,2021

how is it written in css


I got to the point last night
when I got up in the morning, I checked the official documents of sass-loader and found this sentence

.

clipboard.png

the original reason why the path reference of the background image in the sass file could not be replaced is that I did not configure it to css-loader

so this css-loader configuration is fine. If postCss-loader is also configured, then css-loader should be placed in front of postCss-loader, that is, first call PostCss-loader and then call css-loader so that the error will not be reported

Menu