webpack 分環(huán)境配置后 打包出來(lái)的css 文件無(wú)法替換正確的圖片路徑

這是配置的源代碼：

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 樣式的插件對(duì)象
  const ExtractTextSass = new ExtractTextPlugin({
    filename: 'static/css/[name].[hash].css'
  })
  // 根據(jù)不同的環(huán)境 配置不同的loader
  // 根據(jù)不同的環(huán)境 配置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'
      }
    }
  ]

  // 根據(jù)不同環(huán)境 配置 css 文件的loader
  const styleLoader = env === 'prod'
                              ? ExtractTextSass.extract({
                                fallback: 'style-loader',
                                use: cssLoaders.slice(1)  // 因?yàn)榈谝粋€(gè)loader 是style-loader 但是在use 里面不能用styleloader 所以要用slice 將數(shù)組第一項(xiàng)移除
                              })
                              : [].concat(cssLoaders)




  // 根據(jù)不同環(huán)境 配置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'), // 生成文件的根目錄 必須使用絕對(duì)路徑
      chunkFilename: '[name][hash:5].chunk.js',
      publicPath: '/'    // 針對(duì)瀏覽器端訪問(wèn)資源的路徑對(duì)應(yīng)cdn 或服務(wù)器上的資源路徑
    },
    plugins: [
      ...pages.htmlPlugin(),

      ExtractTextSass,

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

      new webpack.ProvidePlugin({
        // 這里寫入一些第三方庫(kù)的名字
        // 例如：
        // $ : 'jquery'
        // webpack 會(huì)根據(jù) 'jquery' 這個(gè)值找到j(luò)query 的模塊
        // 然后在項(xiàng)目中調(diào)用 $(...) 就能夠執(zhí)行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')

          // 在別名后加上＄ 表示通過(guò)這個(gè)名字找到對(duì)應(yīng)的目錄文件而不是目錄
          // 'jquery.min$': path.resolve(__dirname, '../src/module/libs')
        }
      }
    }
 }

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


    return merge(commonConfig(env), config)
 }

按照慕課網(wǎng)的教程寫的 不知道是不是出了什么錯(cuò)漏