Question

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

Answer 1

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

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相当新，但在这种情况下它会产生重大影响。

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

2 个答案: