Webpack config + सेट कई सार्वजनिक पथ मूल्यों

Question 1

मैं दो अलग-अलग मॉड्यूल की तरह छात्रों और स्टाफ ।

छात्रों के लिए फ़ाइलों को बनाया जाना चाहिए में जिला फ़ोल्डर के साथ स्थिर पथ /छात्रों' - publicPath: "/students/".
कर्मचारियों के लिए फ़ाइलों को बनाया जाना चाहिए में जिला फ़ोल्डर के बिना स्थैतिक मार्ग(रूट फ़ोल्डर).

मैं सेट publicPath: "/students/" लेकिन स्टाफ फ़ाइलें स्थिर पथ भी शामिल छात्रों के साथ.

मैं जोड़ा गया config के नीचे

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'],
    })
  ]
};

Question 2

आप उपयोग कर सकते हैं निर्यात एकाधिक विन्यास. बनाने एकाधिक WebPack विन्यास का निर्माण करने के लिए अलग अलग मॉड्यूल है । इतनी है कि आप निर्दिष्ट करें publicPath प्रत्येक के लिए config.

फ़ोल्डर संरचना:

 ⚡  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

ई. जी.

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(),
    ],
  },
];

आउटपुट:

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>

slideshowp2 · Answer 1 · 2021-11-26T06:34:35

आप उपयोग कर सकते हैं निर्यात एकाधिक विन्यास. बनाने एकाधिक WebPack विन्यास का निर्माण करने के लिए अलग अलग मॉड्यूल है । इतनी है कि आप निर्दिष्ट करें publicPath प्रत्येक के लिए config.

फ़ोल्डर संरचना:

 ⚡  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

ई. जी.

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(),
    ],
  },
];

आउटपुट:

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 + सेट कई सार्वजनिक पथ मूल्यों

सवाल

सबसे अच्छा जवाब

अन्य भाषाओं में

यह पृष्ठ अन्य भाषाओं में है

इस श्रेणी में लोकप्रिय

लोकप्रिय सवाल इस श्रेणी में