Webpack 图像文件夹

我对 webpack 还很陌生。

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

我愿意为此not即将发生。

我想让图像文件保留它们的名称，因为在我的 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 }),
  ],
};

文件加载器的默认行为是将每个文件命名为“[hash].[ext]”，如下所示记录在这里 https://github.com/webpack-contrib/file-loader#options。如果您想保留相同的文件名，则需要将名称选项覆盖为“[name].[ext]”。如果您还想保留原始路径结构，也可以在该表达式中使用“[path]”。

在这种情况下你可以尝试：

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

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