Configuring Webpack to required folder structure for build files - reactjs

Question

I have a ReactJS application, that was built using Webpack. So, in my webpack.config.js, I have return the required code to take a build, and everything builds into a 'build' file, in my project folder.
This is the current file structure:
Project
| -- build
| -- index.html
| -- bundle.js
| -- background.png
| -- avatar.png
However, I want my build files to take a separate structure, as shown below:
Project
| -- build
| -- templates
| -- index.html
| -- static
| -- js
| -- bundle.js
| -- images
| -- background.png
| -- avatar.png
My webpack.config.js is provided below. I tried tweaking it, and the structure was obtained, but the images failed to load. The HTML and JS worked without any issues, but the images just didn't load. Shown below is the unaltered code, which builds all the files into a single folder.
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

In your webpack.config.js, set your filename to static/js/bundle.js. This will output your bundle in a newly created build/static/js directory:
module.exports = {
// ...
output: {
filename: 'static/js/bundle.js',
path: path.resolve(__dirname, 'build')
},
// ...
}
Then set the outputPath property of file-loader to static/images/
// ...
{
test: /\.(png|ico|gif)?$/,
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: 'static/images',
}
}
// ...