优化所需文件夹

Question

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

项目结构如下所示

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

前端 - 它是所有反应文件所在的目录。我希望图像在这个目录（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

您可以使用HomeActivity和outputPath查询名称参数指定自定义输出和公共路径：

publicPath

但是这个功能还没有published to NPM。所以不幸的是，你需要等待它被发布或克隆并使用github中的这个加载器repo