Webpack 4: пакет js не найден
Недавно я обновился до webpack 4. Страница загружается успешно, и всякий раз, когда происходят изменения, она автоматически обновляет страницу с помощью webpack-dev-server. Это очень хорошо, но в консоли отображается ошибка ниже
GET http://localhost:8090/build/bundle.js 404 (Not Found)
И иногда, когда в URL-адресе есть идентификатор, он добавляет идентификатор для связывания URL-адреса js, как показано ниже
Я пробовал много способов с ответами на переполнение стека и решениями GitHub, но ни один из них не работал у меня. Ниже приведены детали модуля
"webpack": "^4.15.0", "webpack-cli": "^3.0.8", "webpack-dev-server": "^3.1.4", "babel-core": "^6.26.3", "babel-loader": "^7.1.5", "babel-plugin-transform-class-properties": "^6.24.1", "babel-plugin-transform-object-rest-spread": "^6.26.0", "babel-polyfill": "^6.26.0", "babel-preset-env": "^1.7.0", "babel-preset-react": "^6.24.1"
webpack.config.js:
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const CompressionPlugin = require("compression-webpack-plugin");
const webpack = require('webpack');
module.exports = {
target: "web",
entry: [
"whatwg-fetch",
'webpack-dev-server/client?http://localhost:8090',
'webpack/hot/only-dev-server',
'babel-polyfill',
"./src/index.js"
],
output: {
path: path.resolve(__dirname, "build"),
filename: "bundle.js",
publicPath: "/"
//make sure port 8090 is used when launching webpack-dev-server
},
plugins: [new HtmlWebpackPlugin({
template: "index.html"
}),
new CompressionPlugin({
asset: "[path].gz[query]",
algorithm: "gzip",
test: /\.js$|\.jsx$|\.css$|\.html$/,
threshold: 10240,
minRatio: 0.8
}),
new webpack.HotModuleReplacementPlugin(),
// enable HMR globally
new webpack.NoEmitOnErrorsPlugin(),
new webpack.ProvidePlugin({
jQuery: 'jquery',
$: 'jquery',
jquery: 'jquery'
})
],
module: {
rules: [
{
//tell webpack to use jsx-loader for all *.jsx files
test: /\.(js|jsx)$/,
exclude: /node_modules/,
loader: "babel-loader"
},
{
test: /\.css$/,
loader: "style-loader!css-loader"
},
{
test: /\.(png|jpg|jpeg|gif|woff|woff2|svg)$/,
loader: 'url-loader?limit=100000'
},
{
test: /\.(eot|ttf)$/,
loader: "file-loader"
},
{
test: /\.html$/,
exclude: /node_modules/,
loader: 'html-loader'
},
{
test: /\.scss$/,
loaders: ["style-loader", "css-loader", "sass-loader"]
}
]
},
resolve: {
modules: [
path.resolve("./src"),
path.resolve("./node_modules")
],
extensions: [".js", ".jsx"]
},
devServer: {
watchOptions: {
// Needed for Windows Subsystem for Linux dev environment:
poll: true
},
contentBase: "/build"
},
devtool: "cheap-module-eval-source-map",
node: {
child_process : "empty",
fs: "empty"
}
};
Мой index.html находится в корневом каталоге
index.html
<html>
<head>
<link href = "https://fonts.googleapis.com/css?family=Cabin+Sketch" rel = "stylesheet">
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div id = "App">
<!-- this is where the root react component will get rendered -->
</div>
<script type = "text/javascript" src = "./build/bundle.js"></script></body>
</html>
У меня нет папки dist. У меня есть папка сборки и созданный под ней файл пакета.
Ответы 1
Я нашел ответ после того, как просмотрел все ответы github, связанные с этой проблемой. Я наконец выясняю проблему в своем index.html
Проблема в основном связана с указанием пакета js в index.html. Причина, по которой webpack bundle.js не найден, потому что я указал неправильный путь в своем index.html.
Приведенный ниже решил мою проблему.
<script src = "/bundle.js"></script>
Замечательный! Вместо этого я установил эти ссылки на "./bundle.js", в результате чего пути проходили с одним сегментом URL, например "/ sources" был разрешен правильно при перезагрузке страницы, в то время как "/ sources / new" и т. д. не удалось.
В моем случае я просто забыл предоставить webpack.output.publicPath.
Можете ли вы проверить, действительно ли файл bundle.js находится в папке dist?