无法从distpack文件夹中的webpack生成的index.html引用javascript和css文件
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了无法从distpack文件夹中的webpack生成的index.html引用javascript和css文件相关的知识,希望对你有一定的参考价值。
在我的应用程序上引入路由后,当我的代码发生更改时,我开始遇到问题。
我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">
以上是关于无法从distpack文件夹中的webpack生成的index.html引用javascript和css文件的主要内容,如果未能解决你的问题,请参考以下文章
无法从嵌套组件中的资产文件夹加载图像(Vue.js 2.0 / Webpack)
如何从 webpack 中的资产 url 中删除后缀斜杠“/” |盖茨比
是否可以让 html-webpack-plugin 从 css 生成 <style> 元素?
无法让 webpack require.ensure 分块方法与 react-router 一起使用并生成单独的捆绑文件
我需要从 Vue.js 中的 bundle webpack 中排除 js 库
如何从 Webpack 4 中的页眉/页脚(和 css/js 注入)生成静态页面的 html 模板(lodash 模板不起作用)?