Webpack config + conjunto de múltiples ruta de acceso público de valores

Question 1

Tengo dos módulos diferentes, como los estudiantes y el personal.

Para que los estudiantes deben crear los archivos en la carpeta dist con ruta estática /estudiantes - publicPath: "/students/".
Para el personal que se deben crear los archivos en la carpeta dist sin ruta estática(carpeta raíz).

Me puse el publicPath: "/students/" pero el personal de los archivos de ruta estática también se incluye con los estudiantes.

He añadido la config de abajo

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

Puede utilizar la Exportación de múltiples configuraciones. Crear múltiples WebPack configuraciones para construir los diferentes módulos. Así que usted especifique publicPath para cada configuración.

Estructura de carpetas:

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

Salida:

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

Puede utilizar la Exportación de múltiples configuraciones. Crear múltiples WebPack configuraciones para construir los diferentes módulos. Así que usted especifique publicPath para cada configuración.

Estructura de carpetas:

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

Salida:

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 + conjunto de múltiples ruta de acceso público de valores

Pregunta

Mejor respuesta

En otros idiomas

Esta página está en otros idiomas

Popular en esta categoría

Las preguntas más habituales en esta categoría