После того, как я ввел Routes в свое приложение, у меня возникла проблема, когда я не нашел страницу при внесении изменений в мой код.
Я нашел его в Google и обнаружил, что в моем веб-пакете нужно что-то добавитьнапример:
publicPath: '/',
historyApiFallback: true,
После внесенного мной изменения, добавив вышеперечисленное в мой веб-пакет при запуске npm run build, он создает папку dist с index.html bundle.css и bundle.js, но ссылочные файлы не являютсянапример:
<link href="/bundle.css" rel="stylesheet">
Раньше это было:
<link href="bundle.css" rel="stylesheet">
, поэтому в основном режиме производства не отображается ошибка 404 не найденного файла.
Файл WHole Webpackвыглядит следующим образом:
const HtmlWebPackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CleanWebpackPlugin = require('clean-webpack-plugin');
const webpack = require('webpack');
const path = require('path');
module.exports = (env, argv) => {
console.log("ENV DETECTED: " + argv.mode);
return {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js',
publicPath: '/',
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /\.html$/,
use: [
{
loader: "html-loader",
options: {
minimize: true
}
}
]
},
{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader,
// 'style-loader',
{
loader: 'css-loader',
options: {
importLoaders: 1,
minimize: true
}
},
{
loader: 'postcss-loader',
options: {
config: {
path: './postcss.config.js'
}
}
}
]
},
{
test: /\.scss$/,
use: [
argv.mode !== 'production' ? 'style-loader' : MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: {
importLoaders: 1,
minimize: true
}
},
{
loader: 'postcss-loader',
options: {
config: {
path: './postcss.config.js'
}
}
},
"sass-loader"
]
}
],
},
devServer: {
historyApiFallback: true,
},
plugins: [
new CleanWebpackPlugin('dist', {}),
new HtmlWebPackPlugin({
template: "src/index.html",
filename: "./index.html"
}),
new MiniCssExtractPlugin({
filename: "bundle.css",
chunkFilename: "bundle.css"
}),
require('autoprefixer'),
]
}
};
Так что, если я хочу, чтобы у меня не было проблем со ссылками на файлы из моего index.html в / dist, я могу просто прокомментировать publicPath: '/', из веб-пакетано тогда у меня проблема, я должен обновить свой браузер, чтобы увидеть мои последние изменения.
Я не знаю, как я могу исправить, чтобы я мог ссылаться на файлы из index.html и в то же время иметь возможность использовать publicPath: '/ ', так что у меня нет проблем с livereload!