Webpack config + set multiple public path values

Question

Webpack config + set multiple public path values

1.8k Views Asked by RSKMR At 24 November 2021 at 06:09

I have two different modules like students and staff.

For students files should be created into the dist folder with static path /students' - publicPath: "/students/".
For staff files should be created into dist folder without static path(root folder).

I set the publicPath: "/students/" but staff files static path also included with students.

I have added the config below

const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');

module.exports = {
  entry: {
    students: [
      './students/css/students.css',
      './students/js/students.js',
      './students/templates/students/index.pug'
    ],
    staff: [
      './staff/css/index.css',
      './staff/js/index.js',
      './staff/templates/index.pug',
    ]
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].js',
    publicPath: "/students/"
  },  
  plugins: [
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: './students/templates/students/index.pug',
      chunks: ['students'],
    }),
    new HtmlWebpackPlugin({
      filename: 'staff.html',
      template: './staff/templates/index.pug',
      chunks: ['staff'],
    })
  ]
};

Original Q&A

There are 1 best solutions below

**Lin Du** · Answer 1 · 2021-11-26T06:34:35.127000

You can use Exporting multiple configurations. Create multiple WebPack configurations to build different modules. So that you specify publicPath for each config.

Folder structure:

 ⚡  tree -L 4 -I 'node_modules'
.
├── dist
│   ├── staff.css
│   ├── staff.html
│   ├── staff.js
│   ├── student.html
│   ├── students.css
│   └── students.js
├── package-lock.json
├── package.json
├── staff
│   ├── css
│   │   └── index.css
│   ├── js
│   │   └── index.js
│   └── templates
│       └── index.html
├── students
│   ├── css
│   │   └── index.css
│   ├── js
│   │   └── index.js
│   └── templates
│       └── index.html
└── webpack.config.js

9 directories, 15 files

E.g.

const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const path = require("path");

module.exports = [
  {
    mode: "development",
    entry: {
      students: "./students/js/index.js",
    },
    output: {
      path: path.resolve(__dirname, "dist"),
      filename: "[name].js",
      publicPath: "/students/",
    },
    module: {
      rules: [
        {
          test: /\.css$/i,
          use: [MiniCssExtractPlugin.loader, "css-loader"],
        },
      ],
    },
    plugins: [
      new HtmlWebpackPlugin({
        filename: "student.html",
        template: "./students/templates/index.html",
        chunks: ["students"],
      }),
      new MiniCssExtractPlugin(),
    ],
  },
  {
    mode: "development",
    entry: {
      staff: "./staff/js/index.js",
    },
    output: {
      path: path.resolve(__dirname, "dist"),
      filename: "[name].js",
      publicPath: "/",
    },
    module: {
      rules: [
        {
          test: /\.css$/i,
          use: [MiniCssExtractPlugin.loader, "css-loader"],
        },
      ],
    },
    plugins: [
      new HtmlWebpackPlugin({
        filename: "staff.html",
        template: "./staff/templates/index.html",
        chunks: ["staff"],
      }),
      new MiniCssExtractPlugin(),
    ],
  },
];

Output:

dist/staff.html:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
<script defer src="/staff.js"></script><link href="/staff.css" rel="stylesheet"></head>

<body>

</body>

</html>

dist/students.html:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
<script defer src="/students/students.js"></script><link href="/students/students.css" rel="stylesheet"></head>

<body>

</body>

</html>

Webpack config + set multiple public path values

There are 1 best solutions below

Related Questions in NODE.JS

Related Questions in WEBPACK

Related Questions in WEBPACK-2

Related Questions in WEBPACK-4

Trending Questions

Popular # Hahtags

Popular Questions