How to output javascript files into 'static/js' directory and css files into 'static/css' directory

Question

This is my webpack.prod.config.js code

const path = require('path');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const webpack = require('webpack');
const dotenv = require('dotenv').config({path: path.join(__dirname, '.env')});
const HWP = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const TerserJSPlugin = require('terser-webpack-plugin');
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');

module.exports = {
  mode: 'production',
  entry: path.join(__dirname, '/src/index.jsx'),
  resolve: {
    extensions: ['.js', '.jsx']
  },
  module: {
    rules:[
      {
        test: /\.jsx$/,
        exclude: /node_modules/,
        loader: 'babel-loader'
      },
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader'],
      },
      {
        test: /\.scss$/,
        use: [
          MiniCssExtractPlugin.loader,
          {
            loader: 'css-loader',
            options: {
              importLoaders: 1,
              modules: true,
              localIdentName: "[name]__[local]___[hash:base64:5]"
            },
          },
          "sass-loader"
        ]
      }
    ]
  },
  plugins: [
    new CleanWebpackPlugin(),
    new webpack.DefinePlugin({
      'process.env': JSON.stringify(dotenv.parsed)
    }),
    new MiniCssExtractPlugin({
      filename: '[name].[contenthash].css',
      chunkFilename: '[id].[contenthash].css',
    }),
    new HWP({
      template: path.join(__dirname,'/src/index.html'),
      minify: {
        collapseWhitespace: true
      }
    })
  ],
  optimization: {
    minimizer: [
      new TerserJSPlugin({}),
      new OptimizeCssAssetsPlugin({})
    ]
  },
  output: {
    filename: 'build.[contenthash].js',
    path: path.join(__dirname, '/dist'),
    publicPath: '/'
  }
};

This is my yarn scripts

"scripts": {
    "start": "webpack-dev-server --config webpack.dev.config.js",
    "build": "webpack --config webpack.prod.config.js",
},

After I run yarn build the dist folder structure looks like this:

dist
├── build.c8bf456f14ce9fd024e4.js
├── 0.build.c42e9b89038bc14ee0d4.js
├── 1.build.155be64c26ba718adc27.js
├── main.58bf75b767e0f1d8310f.css
├── 0.c760db0e4330f75ffd4e.css
├── 1.68f70729629baaa5f35b.css
└── index.html

But I want to have all css files into static/css directory and have all javascript files into static/js directory. and of course the both of static/css directory and static/js directory should be inside the dist folder. to make the dist folder structure looks like this:

dist
├── static
│   ├── js
│   │   ├── build.c8bf456f14ce9fd024e4.js
│   │   ├── 0.build.c42e9b89038bc14ee0d4.js
│   │   └── 1.build.155be64c26ba718adc27.js
│   ├── css
│   │   ├── main.58bf75b767e0f1d8310f.css
│   │   ├── 0.c760db0e4330f75ffd4e.css
│   └── └── 1.68f70729629baaa5f35b.css
└── index.html

And of course the index.html file should have the correct path to the main javascript file and correct path to main css file. So if the name of main javascript file is build.c8bf456f14ce9fd024e4.js and the name of main css file is main.58bf75b767e0f1d8310f.css the code inside index.html file should be like this

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>APP TITLE</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="/static/css/main.58bf75b767e0f1d8310f.css" rel="stylesheet"> 
  </head>
  <body>
    <div id="root"></div>
    <script type="text/javascript" src="/static/js/build.c8bf456f14ce9fd024e4.js"></script>
  </body>
</html>

streof · Accepted Answer · 2020-01-29 19:29:51Z

2

It may be helpful, but I do not see chunks for js files in your configuration?

new MiniCssExtractPlugin({
  filename: 'css/[name].[contenthash].css',
  chunkFilename: 'css/[id].[contenthash].css',
}),

output: {
  filename: 'js/build.[contenthash].js',
  path: path.join(__dirname, '/dist'),
  chunkFilename: 'js/[name].[contenthash].js', // ?
  publicPath: '/'
}

edited Jan 29, 2020 at 19:29

streof

1453 silver badges8 bronze badges

answered Aug 1, 2019 at 21:10

Grzegorz T.

4,2182 gold badges14 silver badges27 bronze badges

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

1 Comment

Amjed Omar Over a year ago

When I use your code I got an error and the build failed. But when I changed the value of property chunkFilename to js/[name].[contenthash].js or js/[name].[chunkhash].js the build done successfully without any erros.

Collectives™ on Stack Overflow

How to output javascript files into 'static/js' directory and css files into 'static/css' directory

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related