[英]Webpack imports from entry file, not available in dist/index.html
[英]not able to reference javascript and css files from my index.html generated by webpack in dist folder
在我的應用中引入Routes之后,當我對代碼進行更改時,在找不到頁面時開始遇到問題。
我在Google上搜索了一下,發現我需要在Webpack上添加以下內容:
publicPath: '/',
historyApiFallback: true,
在更改后,通過在運行npm run build時將以上內容添加到我的webpack中進行了更改,它生成了一個帶有index.html bundle.css和bundle.js的dist文件夾,但參考文件不是這樣的:
<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'),
]
}
};
因此,如果我希望在/ dist中從index.html引用文件沒有問題,我可以在webpack中注釋publicPath:'/',但是我有問題,我必須刷新瀏覽器以查看最新更改。
我不知道該如何解決,以便可以從index.html引用文件,同時可以使用publicPath:'/',所以livereload沒有問題!
檢查文件路徑。 使用從ur文件所在的位置開始的相對文件路徑。
假設您的文件路徑位於public / css / bundle.css中,而您的index.html位於根文件夾中。 您的鏈接標記將如下所示:
<Link href = "./public/css/bundle.css" relax="text/stylesheet">
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.