Настройка Webpack на требуемую структуру папок для файлов сборки

Question

У меня есть приложение ReactJS, созданное с помощью Webpack.Итак, в моем webpack.config.js я вернул код, необходимый для сборки, и все встраивается в файл build впапка моего проекта.

Это текущая файловая структура:

Project
  | -- build
     | -- index.html
     | -- bundle.js
     | -- background.png
     | -- avatar.png

Однако я хочу, чтобы мои файлы сборки имели отдельную структуру, как показано ниже:

Project
      | -- build
         | -- templates
              | -- index.html
         | -- static
              | -- js
                    | -- bundle.js
              | -- images
                    | -- background.png
                    | -- avatar.png

My webpack.config.js приведен ниже.Я попытался настроить его, и структура была получена, но изображения не удалось загрузить.HTML и JS работали без проблем, но изображения просто не загружались.Ниже показан неизмененный код, который объединяет все файлы в одну папку.

const HtmlWebPackPlugin = require("html-webpack-plugin");
var path = require('path');

const htmlWebpackPlugin = new HtmlWebPackPlugin({
  template: "./src/index.html",
  filename: "index.html"
});

module.exports = {
  entry: ["@babel/polyfill", './src/index.js'],
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'build')
  },
  devtool: "#eval-source-map",
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: ['babel-loader']
      },
      {
        test: /\.js?$/,
        include: /(src[\/\\]js)/,
        loader: 'babel-loader'
      },
      {
        test: /\.jsx?$/,
        include: /(src[\/\\]jsx)/,
        loader: 'babel-loader'
      },
      {
        test: /\.json?$/,
        exclude: /(node_modules|bower_components)/,
        loader: 'json-loader'
      },
      {
        test: /\.css?$/,
        loaders: ['style-loader', 'raw-loader']
      },
      {
        test: /\.scss?$/,
        loaders: ['style-loader', 'raw-loader', 'sass-loader', 'import-glob']
      },
      {
        test: /\.(png|ico|gif)?$/,
        loader: 'file-loader?limit=30000&name=[name].[ext]'
      }
    ]
  },
  resolve: {
    extensions: ['*', '.js', '.jsx']
  },
  plugins: [htmlWebpackPlugin]
};

Answer 1

В вашем webpack.config.js установите ваше имя файла static/js/bundle.js. Это выведет ваш пакет во вновь созданную директорию build/static/js:

module.exports = {
// ...
  output: {
    filename: 'static/js/bundle.js',
    path: path.resolve(__dirname, 'build')
  },
// ...
}

Затем установите для свойства outputPath file-loader значение static/images/

      // ...
      {
        test: /\.(png|ico|gif)?$/,
        loader: 'file-loader',
        options: {
            name: '[name].[ext]',
            outputPath: 'static/images',
        }
      }
      // ...