javascript - CSS 图像未复制到 Webpack 中的输出文件夹

Question

我正在使用 Webpack 将多个 js/css 文件捆绑在一个站点中。我正在捆绑 bootstrap.css 和 chosen.css作为我的 bundle 的一部分。为了创建 bundle ，我有一个 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 包中。但是，未拾取 chosen.css 中引用的图像。谁能告诉我需要做什么才能使图像正常工作？我试过用 url-loader 替换 file-loader 但没有改变。我也试过在我的 main.js 中导入图像并且它们被移动了，但是 css 包中的 url 没有被正确重写。

Answer 1

在 output 中配置 path 让生活变得更轻松。这将作为基本输出文件夹，所有其他加载器/插件都可以相对于它工作。可能是文件已复制但未复制到您想要的目录。请看一下WebpackBootstrap repo .配置复制并正确转换图像路径。