Webpack 没有加载 Css、图像和字体

Posted 2023-02-21

【中文标题】Webpack 没有加载 Css、图像和字体

【英文标题】：Webpack is not loading Css, Images and font

【发布时间】：2021-11-01 22:46:00

【问题描述】：

我正在尝试使用 webpack 加载 Css、图像和字体。这是我的 webpack.config.js

const path = require('path');

module.exports = 
    entry: './src/index.js',
    mode: 'development',
    output: 
        filename: "main.js",
        path: path.resolve(__dirname,"dist")
    ,
    module:
        rules:[
            
                test: /\.css$/i,
                use: ['style-loader', 'css-loader'],
            ,
            
                test: /\.(png|svg|jpg|jpeg|gif)$/i,
                type: "asset/resource",
            ,
            
                test: /\.(woff|woff2|eot|ttf|otf)$/i,
                type: "asset/resource",
            ,
        ],
    ,
;

这是我的 package.json

  "name": "restaurant-page",
  "version": "1.0.0",
  "description": "",
  "private": true,
  "scripts": 
    "test": "echo \"Error: no test specified\" && exit 1",
    "watch": "webpack --watch",
    "build": "webpack"
  ,
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": 
    "css-loader": "^6.2.0",
    "style-loader": "^3.2.1",
    "webpack": "^5.51.1",
    "webpack-cli": "^4.8.0"
  ,
  "dependencies": 

这是我的 index.js。当我取消注释 ./styles.css 导入时，我得到 main.js:290 Uncaught Error: Automatic publicPath is not supported in this browser 在 chrome 控制台中，我的 js 导入不起作用，但是当我在终端中运行 npm run build commmand 时，它不会在构建项目时引发错误。我尝试在每个 js 模块中使用 css 导入 - 在 home.js 等文件中，但这也不起作用。

// import './style.css';

import  homeContent, removeIntroContent  from './Modules/home.js';
import  aboutContent, removeAboutContent  from './Modules/about.js';
import  reviewsContent, removeReviewContent  from './Modules/reviews.js';



const home = document.getElementById("home-btn");
const review = document.getElementById("review-btn");
const about = document.getElementById("about-btn");

homeContent();

home.addEventListener("click",()=>
    removeReviewContent();
    removeAboutContent();
    const id = document.getElementById("intro-content");
    if(id != null) return;
    homeContent();
);

review.addEventListener("click",()=>
    removeAboutContent();
    removeIntroContent();
    const id = document.getElementById("reviews");
    if(id != null) return;
    reviewsContent();
);

about.addEventListener("click",()=>
    removeReviewContent();
    removeIntroContent();
    const id = document.getElementById("about");
    if(id != null) return;
    aboutContent()
);

如果有人想查看文件结构，我已将代码推送到 github 这是link

ps：如果我使用链接标签将 css 添加到 html 中，它会完全按照我的意愿工作，但这违背了使用 webpack 的目的

【问题讨论】：

错误信息表明你应该在你的webpack配置中设置publicPathoutput

我不明白设置 publicPath 的原因，因为我没有使用服务器，而 publicPath 与服务器有关（不是 100% 肯定，因为我对此仍然很陌生）。但无论如何我试过publicPath: path.resolve("/public/assets/js")它确实删除了错误，但我的css图像和字体没有加载。正如我在其他评论中提到的，问题是图像和字体的加载，而不是我最初认为的 css。

as I am not working with servers 你总是有一个服务器，浏览器应该从哪里加载文件？ publicPath 用于告诉加载程序在哪里可以找到资源。它不是文件系统中的本地路径，而是指向输出目录的 URL 中域之后的部分 (path: path.resolve(__dirname,"dist"))。所以它可能类似于publicPath: '/dist'。

【参考方案1】：

我也遇到了 Webpack 的问题，我遇到了你的问题。对于您的问题，我没有确定的解决方案，但我希望能引导您朝着正确的方向前进。

乍一看，我想知道当你运行“npm run build”而不是默认的 webpack 配置时，是否编辑你的 package.json 文件以使用你的 webpack-config。这可以帮助激活您尝试使用的加载程序，或者至少填充错误消息，以便您进一步调查。编辑你的 package.json 看起来像：

  "scripts": 
    "test": "echo \\\"Error: no test specified\\\" && exit 1",
    "watch": "webpack --watch",
    "build": "webpack --config ./webpack-config.js"

你的依赖是有意义的，你的 style.css 文件路径似乎是正确的，所以我想知道 Webpack 是否不知道如何在没有你的配置文件的情况下加载你的样式、字体、图像。

可以在此处阅读有关 Webpack 配置的更多信息。 https://webpack.js.org/configuration/

希望我能提供帮助，祝你好运！如果您还有其他问题，我很乐意提供帮助，因为我也在学习 Webpack。

【讨论】：

昨天我自己调试了一下。我确定了错误的来源。样式加载器和 css 加载器不是这里的问题。如果我在我的 css 中注释掉这两个项目，我的 css 文件有图像和字体，其他一切都加载得很好。所以问题是我加载图像和字体的方式。我试过"build": "webpack --config ./webpack-config.js"，但给了我错误Error: Cannot find module '/home/mubashir/Documents/Restaurant-Page/webpack-config.js'，可能是因为./webpack-config.js中有连字符，所以在咨询了webpack之后，我用句号代替了连字符。

它编译没有错误，但我的问题没有解决（我仍然收到错误）