Tengo un problema mientras trabajo con Webpack. Estoy usando un archivo JS para llamar a una API, pero esta API debe llamarse solo en escudos.html, pero cuando hago la compilación de Webpack, el archivo JS llama a la API int (index.html, escudos.html). Solo quiero que ./src/js/teams.js llame a la API cuando estoy en escudos.html, no en ambos (index.html, escudos.html) HTML.
const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { entry: { index: './src/js/index.js', teams: './src/js/teams.js', }, output: { path: path.resolve(__dirname, 'dist'), filename: 'js/[name].bundle.js', }, plugins: [ new HtmlWebpackPlugin({ filename: 'index.html', template: './src/index.html', }), new HtmlWebpackPlugin({ filename: 'escudos.html', template: './src/escudos.html', }), ], devServer: { static: './dist', }, module: { rules: [ { test: /\.js$/, exclude: /node_modules/, use: { loader: 'babel-loader' }, }, ], }, };por alguna razón, mi archivo webpacked index.html también tiene teams.js
El problema (y la solución) está en HtmlWebpackPlugin. HtmlWebpackPlugin inyecta todas las entradas en cada página de forma predeterminada.
Existen tres soluciones que se me ocurren:
inject: false : esto deshabilita la inyección automática de etiquetas <script> en la plantilla. Debe escribir manualmente las etiquetas <script> con el src adecuado. (Psss: no)chunks : especifique qué entradas desea que se incluyan en esta plantilla. EG: (Resuelve el problema OP, lo que necesitará/usará en la mayoría de los casos) new HtmlWebpackPlugin({ template: "./src/index.html", chunks: ["index"] }), new HtmlWebpackPlugin({ template: "./src/escudos.html", chunks: ["teams"] })exclude : inyecta todas las entradas excepto las especificadas en esta matriz. P.EJ new HtmlWebpackPlugin({ template: "./src/test.html", exclude: ["index"] })