CODEWITHSUNDEEP
reactjswebpack
Varun Nair
Varun Nair

Reputation: 349

Configuring Webpack to required folder structure for build files

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

Upvotes: 2

Views: 5472

Answers (1)

axm__
axm__

Reputation: 2673

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

Upvotes: 3

Related Questions