Webpack config+ตั้งหลายเส้นทางสาธารณะค่า

Question 1

ฉันมีสองคนแตกต่างมอดูลเหมือนนักเรียนและพนักงาน.

สำหรับนักเรียนแฟ้มควรถูกสร้างขึ้นใน dist โฟลเดอร์กับคลื่นเสียงบอกความเส้นทาง/งนักเรียน- publicPath: "/students/".
สำหรับพนักงานแฟ้มควรถูกสร้างขึ้นไป dist โฟลเดอร์โดยไม่มีคลื่นเสียงบอกความเส้นทาง(root โฟลเดอร์)

ฉันตั้งค่า publicPath: "/students/" แต่พนักงานแฟ้มในรูปของไฟฟ้าสถิตย์อเส้นทางก็รวมอยู่กับนักเรียน

ฉันต้องเพิ่มแล้ว the 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

คุณสามารถใช้ ส่งออกไปยังหลาย configurations. สร้างหลาย WebPack configurations เพื่อสร้างแตกต่างมอดูล ดังนั้นคุณกำหนด 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

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

แสดงผล:

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

คุณสามารถใช้ ส่งออกไปยังหลาย configurations. สร้างหลาย WebPack configurations เพื่อสร้างแตกต่างมอดูล ดังนั้นคุณกำหนด 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

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

แสดงผล:

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+ตั้งหลายเส้นทางสาธารณะค่า

คำถาม

คำตอบที่ดีที่สุด

ในภาษาอื่นๆ

หน้านี้อยู่ในภาษาอื่นๆ

ดังอยู่ในนี้หมวดหมู่

ดังคำถามอยู่ในนี้หมวดหมู่