Конфигурация веб-пакета + установка нескольких значений общедоступного пути

Question 1

У меня есть два разных модуля, таких как студенты и сотрудники.

Для студентов файлы должны быть созданы в папке dist со статическим путем /студенты' - publicPath: "/students/".
Для персонала файлы должны быть созданы в папке dist без статического пути(корневая папка).

Я установил publicPath: "/students/" но статический путь к файлам персонала также включен в список учащихся.

Я добавил конфигурацию ниже

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

Вы можете использовать экспорт нескольких конфигураций. Создайте несколько конфигураций веб-пакетов для создания различных модулей. Чтобы вы указали publicPath для каждой конфигурации.

Структура папок:

 ⚡  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

Вы можете использовать экспорт нескольких конфигураций. Создайте несколько конфигураций веб-пакетов для создания различных модулей. Чтобы вы указали publicPath для каждой конфигурации.

Структура папок:

 ⚡  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>

Конфигурация веб-пакета + установка нескольких значений общедоступного пути

Вопрос

Лучший ответ

На других языках

Эта страница на других языках

Популярное в этой категории

Популярные вопросы в этой категории