Tengo la siguiente configuración de paquete web:
webpack.common.js :
const path = require('path'); module.exports = { entry: './src/index.js', watchOptions: { ignored: [ path.resolve(__dirname, '.git'), path.resolve(__dirname, 'node_modules'), ] }, module: { rules: [], }, resolve: { extensions: ['.js'], }, output: { filename: 'bundle.js', path: path.join(__dirname, 'dist'), publicPath: "/dist/", }, }; webpack.dev.js :
const { merge } = require('webpack-merge'); const common = require('./webpack.common.js'); const HtmlWebpackPlugin = require('html-webpack-plugin') module.exports = merge(common, { mode: 'development', devtool: 'inline-source-map', devServer: { open: true, compress: false, port: 9000, http2: false, https: false, liveReload: true, watchFiles: ['src/**/*'], client: { overlay: false, }, static: { directory: __dirname, } }, plugins: [ new HtmlWebpackPlugin({ template: './src/index.html', }) ] });Mi estructura de carpetas:
webpack.common.js webpack.dev.js src/ ├─ index.html ├─ index.jsVersiones de herramientas:
"html-webpack-plugin": "^5.5.0" "webpack": "^5.52.0" "webpack-dev-server": "^4.1.0" "webpack-merge": "^5.8.0" PREGUNTA: Cuando webpack-dev-server --config webpack.dev.js en la carpeta raíz, obtengo un error 404 para index.html cuando accedo a localhost:9000/index.html . ¿No debería crearse index.html en la memoria?
Obtengo esto en el registro al iniciar el servidor:
asset bundle.js 901 KiB [emitted] (name: main) asset index.html 5 KiB [emitted] ¿Cómo no obtener el error 404 y acceder a index.html que está en la memoria? ¿Me estoy perdiendo de algo?
Tal vez esta configuración de paquete web solucione su problema, el index.html puede estar en una carpeta "pública" y no en "src", y configure habilitar la inyección en index.html
Prueba esta configuración:
const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const MiniCssExtractPlugin = require('mini-css-extract-plugin'); module.exports ={ mode: 'development', entry: './src/index.js', output: { path: path.resolve(__dirname, 'dist'), filename: 'index.js' }, resolve: { extensions: ['.js','.jsx'] }, module: { rules: [ { test: /\.(js|jsx)$/, exclude: /node_modules/, use:{ loader: 'babel-loader' } }, { test: /\.html$/, use:{ loader: 'html-loader' } }, { test: /\.(css|scss)$/, use:[ "style-loader", "css-loader", "sass-loader" ] }, { test: /\.svg$/, use:{ loader: "svg-url-loader" } }, { test: /\.png$/, use: [ "file-loader", { loader: "image-webpack-loader" } ] } ] }, plugins: [ new HtmlWebpackPlugin({ template: "./public/index.html", inject:true, filename: 'index.html' }), new MiniCssExtractPlugin(), ], devServer:{ static: { publicPath: path.join(__dirname, 'dist') }, open:true, compress: true, port: 3000 } }Mi problema fue con esta línea en webpack.common.js :
publicPath: "/dist/"Al quitarlo, funcionó.