CSS圖像未復制到Webpack的輸出文件夾中

Question

我正在使用Webpack捆綁站點中的許多js / css文件。 我將bootstrap.css和selected.css捆綁在一起。 為了創建捆綁包，我有一個main.js用作入口點，以導入我需要的所有其他文件。 我正在使用文件加載器來處理字體和圖像文件，並將它們移動到適當的目錄。 我將ExtractTextPlugin與css-loader和resolve-url-loader結合使用，以從我的js包中創建單獨的css包。

我的main.js是：

import 'bootstrap/dist/css/bootstrap.css';
import 'chosen-js/chosen.css';
import './datetimehelper.js';
import './deletelink.js';
import './dropdown.js';

我的webpack.config.js是：

var ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
  entry: './src/js/main.js',
  output: {
    filename: 'wwwroot/js/bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      },
      {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: 'images/[name].[ext]',
              outputPath: 'wwwroot/'
            }
          }
        ]
      },
      {
        test: /\.(eot|svg|ttf|woff|woff2)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: 'fonts/[name].[ext]',
              outputPath: 'wwwroot/'
            }
          }
        ]
      },
      {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          use: ['css-loader?url=false', 'resolve-url-loader'],
          publicPath: '../'
        })
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin({
      filename: 'wwwroot/css/bundle.css'
    })
  ]
};

通過上述配置，將拾取bootstrap.css中的字體引用，將其移至相應的目錄，並將URL固定在發出的css包中。 但是，selected.css中引用的圖像不會被拾取。 誰能告訴我要使圖像正常工作我需要做什么？ 我試過用url-loader替換file-loader，並且沒有任何變化。 我也嘗試過將圖像導入main.js中，並進行了移動，但是css捆綁包中的URL未被正確重寫。

Answer 1

在output配置path使工作變得更加輕松。 那將作為基本輸出文件夾，所有其他加載器/插件都可以相對於此工作。 可能是文件已復制但未復制到您的預期目錄。 請看一下WebpackBootstrap倉庫 。 配置復制並正確轉換圖像路徑。

Answer 2

我終於弄明白了。 在規則中，我有：

{
  test: /\.css$/,
  use: ExtractTextPlugin.extract('css-loader', 'resolve-url-loader')
}

相反，它應該是：

{
  test: /\.css$/,
  loader: ExtratTextPlugin.extract('css-loader', 'resolve-url-loader')
}

不知道use和loader之間有什么區別，因為我對Webpack還是很陌生，但是在這種情況下，它會帶來所有改變。