webpack插件extract-text-webpack-plugin抽取css后，圖片路徑出現(xiàn)問題？

打包后的目錄結(jié)構(gòu)

│  .babelrc
│  index.html
│  list.txt
│  package-lock.json
│  package.json
│  webpack.config.js
│  
├─dist
│  │  index.html
│  │  
│  ├─css
│  │      main.css
│  │      
│  ├─images
│  │      holder.jpg
│  │      
│  └─js
│          main.bundle.js
│          
└─src
    │  app.js
    │  
    ├─assets
    │      car2.jpg
    │      holder.jpg
    │      
    └─components
            test.css
            test.js

webpack配置文件(版本是`^3.8.1`)

const path = require('path');
const webpack = require('webpack');
const htmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const Build_Path = path.resolve(__dirname,'dist');

const BuildConfig = {
    entry: './src/app.js',
    output: {
        path: Build_Path,
        filename: 'js/[name].bundle.js'
    },
    module:{
        rules: [
            { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" },
              {
                  test: /\.css$/,
                  use: ExtractTextPlugin.extract({
                      fallback: 'style-loader',
                      use: [
                          {
                              loader: 'css-loader',
                              options: {
                                  importLoaders: 1
                              }
                          },
                          {
                              loader: 'postcss-loader',
                              options: {
                                  ident: 'postcss',
                                  plugins: (loader) => [
                                      require('autoprefixer')(),
                                      require('cssnano')()
                                  ]
                              }
                          }
                      ]
                  })
              },
              {
                  test: /\.less$/i,
                  use: ExtractTextPlugin.extract({
                      fallback: 'style-loader',
                      use: [
                          'css-loader',
                          {
                              loader: 'postcss-loader',
                              options: {
                                  ident: 'postcss',
                                  plugins: (loader) => [
                                      require('autoprefixer')(),
                                      require('cssnano')()
                                  ]
                              }
                          },
                          'less-loader'
                      ]
                  })
              },
              {
                  test: /\.(png|jpg|gif|svg)$/i,
                  loader: 'file-loader',
                  options:{
                      name: 'images/[name].[ext]'
                  }
              }
        ]
    },
    plugins:[
        new CleanWebpackPlugin([Build_Path],{verbose:false}),
        new htmlWebpackPlugin({
            filename: 'index.html',
            template: 'index.html',
            inject: 'body'
        }),
        new ExtractTextPlugin('css/[name].css')
    ]
};

module.exports = BuildConfig;

html文件

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="renderer" content="webkit">
</head>
<body>
    <div class="wrapper">
        <img src="src/assets/car2.jpg" alt="">
        <div class="box">
            <p>1</p>
            <div class="imgbg"></div>
        </div>
    </div>
</body>
</html>

如上圖的打包后的目錄結(jié)構(gòu)是我想要的，css/js/images/分別打包出一個對應(yīng)的文件夾
我index.html模板文件下有直接引入圖片，在css文件中也有用相對路徑寫出背景圖片

問題

如果不用extract-text-webpack-plugin提取css出來，是沒有問題的，所以我猜測問題是出在這個插件上，也看到sf上有網(wǎng)友提出這個問題，但是沒有很好的解決方案
在查找答案的過程中，有說修改output.publicPath的，也有說在插件下添加options.publicPath的，還有說修改file-loader.options.publicPath，我都有測試，可能是測試的方法不對，都沒有達到我想要的效果。
倒是修改file-loader下的name，把images/[name].[ext]改成[name].[ext]就可以，但是不能把圖片放在dist/images文件夾下

所以希望各位大神能幫忙解決這個問題，在這里先謝過了！

回答

編輯回答

愛是癌

https://zhuanlan.zhihu.com/p/...

2017年4月24日 03:23

編輯回答

未命名

使用 copy-webpack-plugin 這個插件

npm install copy-webpack-plugin --save-dev

const CopyWebpackPlugin = require('copy-webpack-plugin'); 

 plugins: [
    new CopyWebpackPlugin([
      {
        from: "./src/assets",
        to: resolve("dist/images")
      }
    ])
    
    
 ]

2018年2月13日 14:39

編輯回答

純妹

修改rules加載器中的publicPath路徑，
use: ExtractTextPlugin.extract({

            fallback: "style-loader",
            use: [{
                loader: 'css-loader',
                options: {
                    minimize: true //css壓縮
                }
            }, 'postcss-loader'],
            publicPath: '../'
        })

2017年10月14日 03:08