[英]Webpack dev server not finding index.html
我有以下 webpack 配置:
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',
})
]
});
我的文件夹结构:
webpack.common.js
webpack.dev.js
src/
├─ index.html
├─ index.js
工具版本:
"html-webpack-plugin": "^5.5.0"
"webpack": "^5.52.0"
"webpack-dev-server": "^4.1.0"
"webpack-merge": "^5.8.0"
问题:在根文件夹中运行webpack-dev-server --config webpack.dev.js
时,我在访问localhost:9000/index.html
时遇到 404 错误index.html
不应该在index.html
中创建 index.html 吗?
启动服务器时,我确实在日志中得到了这个:
asset bundle.js 901 KiB [emitted] (name: main)
asset index.html 5 KiB [emitted]
如何不获取 404 错误和访问index.html
位于 memory 中? 我错过了什么吗?
也许这个 webpack 配置解决了你的问题,index.html 可能在文件夹“public”中而不是在“src”中,并在 index.ZFC35FDC70D5FC69D269883A822C7A53E 上设置启用注入
试试这个配置:
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
}
}
我的问题是webpack.common.js
中的这一行:
publicPath: "/dist/"
通过删除它,它起作用了。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.