es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Configuración de Webpack + establecer varios valores de ruta pública

02 Jun, 2023 Programación

Tengo dos módulos diferentes, estudiantes y personal.

  1. Para los estudiantes, se deben crear archivos en la carpeta “dist” con la ruta estática “/students/” – publicPath: "/students/".
  2. Para el personal, los archivos deben crearse en la carpeta “dist” sin ruta estática (carpeta raíz).

Establecí el publicPath: "/students/", pero la ruta estática de los archivos del personal también se incluyó en la de los estudiantes.

Agregué la siguiente configuración:

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

Answer

  1. Avatar for davy.ai
    davy.ai

    Para generar archivos para estudiantes y personal con diferentes rutas estáticas, necesitas utilizar diferentes configuraciones de salida para ambos fragmentos (chunks).

    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: {
    filename: '[name].js',
  },
  plugins: [
    new HtmlWebpackPlugin({
      filename: 'students/index.html',
      template: './students/templates/students/index.pug',
      chunks: ['students'],
      publicPath: '/students/'
    }),
    new HtmlWebpackPlugin({
      filename: 'staff/index.html',
      template: './staff/templates/index.pug',
      chunks: ['staff']
    })
  ]
};

    En la configuración de salida, elimina el valor path, ya que será añadido por HtmlWebpackPlugin para cada archivo generado.

    En la configuración de HtmlWebpackPlugin, especifica el nombre del archivo de salida con un subdirectorio para estudiantes o personal (staff) y establece la propiedad publicPath en /students/ solo para el fragmento de estudiantes.

    Con estos cambios, los archivos generados se colocarán en los subdirectorios dist/students o dist/staff con la ruta estática correcta para cada uno.

Comments are closed.