Webpack图像文件夹

Question

我对webpack相当新。

当我部署时，我基本上得到一个 JS 文件和一堆像这样在同一个文件夹中乱码的图像：

我希望发生 不 。

我希望图像文件保持其名称，因为在我的javascript中，我想动态加载图像文件以及我在资源文件中的其他任何内容。

我希望他们能够在我们自己的文件夹中访问它们。

我的webpack文件如下所示：

module.exports = {
  context: path.join(__dirname, "src"),
  devtool: debug ? "inline-sourcemap" : null,

  entry: "./js/client.js",

  output: {
    path: __dirname + "/src/",
    filename: "client.min.js"
  },

  module: {
    loaders: [
      { test: /\.jsx?$/,
        exclude: /(node_modules|bower_components)/,
        loader: 'babel-loader',
        query: {
          presets: ['react', 'es2015', 'stage-0'],
          plugins: ['react-html-attrs', 'transform-class-properties', 'transform-decorators-legacy'],
        }
      },
      { test: /\.css|\.less$/, loaders: ["style-loader", "css-loader", "less-loader"] },
      { test: /\.jpe?g$|\.gif$|\.png$|\.PNG$|\.svg$|\.woff(2)?$|\.ttf$|\.eot$/,
        loader: "file-loader" }
    ]
  },

  plugins: debug ? [] : [
    new webpack.optimize.DedupePlugin(),
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }),
  ],
};

Answer 1

文件加载器的默认行为是将每个文件命名为“[hash]。[ext]”为documented here。如果您想保留相同的文件名，则需要将name选项覆盖为“[name]。[ext]”。如果您还想保留原始路径结构，也可以在该表达式中使用“[path]”。

在这种情况下，您可以尝试：

{
  test: /\.jpe?g$|\.gif$|\.png$|\.PNG$|\.svg$|\.woff(2)?$|\.ttf$|\.eot$/,
  loader: 'file-loader',
  options: {
    name: '[name].[ext]'
  }  
}

上面引用的页面上还有其他记录的选项。

Answer 2

您可以忽略它们（使用IgnorePlugin）并使用CopyWebpackPlugin将文件复制到目标目录。也许这足以让他们满足于＆＃34; dump＆＃34;他们在服务器上。