Configuring Webpack to required folder structure for build files

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]
};

axm__ · Accepted Answer · 2019-04-04 12:28:41Z

3

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',
        }
      }
      // ...

answered Apr 4, 2019 at 12:28

axm__

2,7032 gold badges23 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Varun Nair Over a year ago

I tried specifying the path for html file as: filename: "templates/index.html" , but this failed to load the images in browser.

axm__ Over a year ago

Ok, can you update your question to include on what wrong locations your browser is trying to find the images?

Luciano Semerini Over a year ago

maybe you need to setup publicPath to the file-loader options ?github.com/webpack-contrib/file-loader

axm__ Over a year ago

What happens if you don't put it there (in the plugin), but in Webpacks output.publicPath, with the value /static/ ? See webpack.js.org/configuration/output/#outputpublicpath

Varun Nair Over a year ago

With the inputs from you guys, and a little improv, I managed to fix it. I modified the publicPath as "publicPath: '../static/images'" , that solved everything.

|

Collectives™ on Stack Overflow

Configuring Webpack to required folder structure for build files

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related