javascript - 优化所需文件夹内的图像

Question

我正在使用 webpack 进行捆绑。我正在使用reactjs 和django。我希望 Django 和 Reactjs 使用的静态文件是分开的。我可以缩小图像，但缩小图像会保存到捆绑输出文件的文件夹中。我希望所有缩小的图像都保存在前端 -> Assets 文件夹中。我怎样才能这样做呢？

项目结构如下所示

app - 它是为 Django 保存静态文件的目录。 Webpack 将 React 文件捆绑到 app.js 并放置在这里，因为 Django 模板需要它在其模板中呈现为 <script src='app/bundle/js/app.js'></script> 。

frontend - 这是所有反应文件所在的目录。我希望图像位于此目录(assets/images/)内。将在reactjs中使用的图像。

我怎样才能做到这一点？

我的 webpack 现在是这样配置的

const path = require("path");
if(!process.env.NODE_ENV) {
    process.env.NODE_ENV = 'development';
}

module.exports = {
  entry: [
    './src/index.js'
  ],
  output: {
    path: path.join("../app/static/build/", "js"),
    filename: "app.js",
    publicPath: "../app/static/build/"
  },
  devtoo: 'source-map',
  debug: true,
  module: {
    loaders: [{
      exclude: /node_modules/,
      loader: 'babel',
      query: {
        presets: ['react', 'es2015', 'stage-1']
      }
    },
    {test: /\.(jpe?g|png|gif|svg)$/i, loader: "file-loader?name=images/[name].[ext]"},
    ]
  },
  resolve: {
    extensions: ['', '.js', '.jsx']
  },
  devServer: {
    historyApiFallback: true,
    contentBase: './'
  }
};

Answer 1

您可以使用 outputPath 和 publicPath 查询名称参数指定自定义输出和公共(public)路径:

loader: "file-loader?name=[name].[ext]&publicPath=assets/foo/&outputPath=app/images/"

但这个功能不是published to NPM然而。因此，不幸的是，您需要等待它被发布或克隆并使用来自 github repo 的此加载器。