Question

我在 Netlify 上有一个由 webpack 服务的投资组合网站。昨天当我尝试用新的较小的个人肖像替换旧的个人肖像时，整个网站都很好，但图像不显示。既然捆绑过程成功了，不知道哪里出了问题。我如何调试此类问题？在此先感谢您的帮助。这是 package.json 文件：

{
  "name": "simplefolio",
  "version": "1.0.1",
  "description": "A clean, beautiful and responsive portfolio template for Developers!",
  "main": "index.js",
  "scripts": {
    "start": "webpack serve --config webpack.dev.js --open",
    "build": "CI= webpack --config webpack.prod.js"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/cobidev/simplefolio"
  },
  "keywords": [],
  "author": "Jacobo Martinez",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/cobidev/simplefolio/issues"
  },
  "homepage": "https://github.com/cobidev/simplefolio#readme",
  "devDependencies": {
    "clean-webpack-plugin": "^3.0.0",
    "css-loader": "^5.1.2",
    "file-loader": "^6.2.0",
    "html-loader": "^2.1.2",
    "html-webpack-plugin": "^5.3.1",
    "mini-css-extract-plugin": "^1.3.9",
    "node-sass": "^5.0.0",
    "optimize-css-assets-webpack-plugin": "^5.0.4",
    "sass-loader": "^11.0.1",
    "style-loader": "^2.0.0",
    "webpack": "^5.24.4",
    "webpack-cli": "^4.5.0",
    "webpack-dev-server": "^3.11.2",
    "webpack-merge": "^5.7.3"
  },
  "dependencies": {
    "bootstrap": "^4.6.0",
    "jquery": "^3.6.0",
    "popper.js": "^1.16.1",
    "tilt.js": "^1.2.1"
  }
}

这是我尝试通过命令 npm start

在 localhost 上运行它时的日志

PS D:\profolio\simplefolio> npm start

> simplefolio@1.0.1 start D:\profolio\simplefolio
> webpack serve --config webpack.dev.js --open

i ｢wds｣: Project is running at http://localhost:8080/
i ｢wds｣: webpack output is served from /
i ｢wds｣: Content not from webpack is served from D:\profolio\simplefolio
i ｢wdm｣: wait until bundle finished: /
i ｢wdm｣: assets by info 561 KiB [immutable]
  assets by path assets/ 560 KiB 5 assets
  assets by path *.jpg 429 bytes
    asset bf7b50cb838cdc056e85.jpg 109 bytes [emitted] [immutable] [from: src/assets/project-smart-brain.jpg]
    asset ca8759882e1ba9dc7d1d.jpg 109 bytes [emitted] [immutable] [from: src/assets/project-robofriends.jpg]
    asset d37b8d330ebcf1be0e4b.jpg 109 bytes [emitted] [immutable] [from: src/assets/project-online-shop.jpg]
    asset 8140dc22061f2815445f.jpg 102 bytes [emitted] [immutable] [from: src/assets/profile1_300.jpg] 
  asset 3d0f3d129ac80e6d8a7a.png 97 bytes [emitted] [immutable] [from: src/assets/favicon.png]
assets by path *.js 1.8 MiB
  asset vendor.bundle.js 922 KiB [emitted] (name: vendor)
  asset main.bundle.js 920 KiB [emitted] (name: main)
asset index.html 10.7 KiB [emitted]
asset favicon.png 6.47 KiB [emitted]
runtime modules 2.5 KiB 12 modules
modules by path ./node_modules/ 864 KiB
  modules by path ./node_modules/webpack-dev-server/client/ 20.9 KiB 10 modules
  modules by path ./node_modules/html-entities/lib/*.js 61 KiB 5 modules
  modules by path ./node_modules/webpack/hot/ 1.58 KiB 3 modules
  modules by path ./node_modules/url/ 37.4 KiB 3 modules
  modules by path ./node_modules/querystring/*.js 4.51 KiB 3 modules
modules by path ./src/ 199 KiB
  modules by path ./src/js/*.js 2.04 KiB 3 modules
  modules by path ./src/*.js 483 bytes
    ./src/vendor.js 58 bytes [built] [code generated]
    ./src/index.js 425 bytes [built] [code generated]
  modules by path ./src/style/*.scss 197 KiB
    ./src/style/main.scss 375 bytes [built] [code generated]
    ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/style/main.scss 
196 KiB [built] [code generated]
webpack 5.24.4 compiled successfully in 9793 ms
i ｢wdm｣: Compiled successfully.
i ｢wdm｣: Compiling...
i ｢wdm｣: wait until bundle finished: /vendor.bundle.js
i ｢wdm｣: wait until bundle finished: /main.bundle.js
i ｢wdm｣: assets by status 1.8 MiB [cached] 2 assets
asset index.html 10.7 KiB [emitted]
cached modules 1.04 MiB (javascript) 2.5 KiB (runtime) [cached] 55 modules
webpack 5.24.4 compiled successfully in 204 ms
i ｢wdm｣: Compiled successfully.

这里是 webpack.common.js 文件：

const Webpack = require("webpack");
module.exports = {
  entry: {
    vendor: "./src/vendor.js",
    main: "./src/index.js"
  },
  module: {
    rules: [
      {
        test: /\.html$/,
        use: ["html-loader"]
      },
      {
        test: /\.(jpg|jpeg|png|gif|svg|pdf)$/,
        use: [
          {
            loader: "file-loader",
            options: {
              name: "[name].[hash].[ext]",
              outputPath: "assets",
              esModule: false
            }
          }
        ]
      }
    ]
  },
  // This config allows to use jQuery $ sign
  plugins: [
    new Webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery"
    })
  ]
};

最后，这里是 webpack.dev.js 文件：

const HtmlWebpackPlugin = require("html-webpack-plugin");
const common = require("./webpack.common");
const { merge } = require("webpack-merge");
const path = require("path");

module.exports = merge(common, {
  mode: "development",
  output: {
    filename: "[name].bundle.js",
    path: path.resolve(__dirname, "dist"),
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./src/template.html",
      favicon: "./src/assets/favicon.png",
    }),
  ],
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          "style-loader", //3. Inject styles into DOM
          "css-loader", //2. Turns css into commonjs
          "sass-loader",
        ], //1. Turns sass into css
      },
      {
        test: /\.(png|jpe?g|gif)$/i,
        use: [
          {
            loader: "file-loader",
          },
        ],
      },
    ],
  },
});

Answer 1

安装file-loader并安装sass-loader@10

安装 html-loader 或 npm install html-loader@1 --save-dev

webpack.config.dev.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.html$/i,
        loader: 'html-loader',
      },
      {
        test: /\.(png|jpe?g|gif)$/i,
        use: [
          {
            loader: 'file-loader',
          },
        ],
      },
    ],
  },
};

我的 npm 包

"devDependencies": {
    "clean-webpack-plugin": "^3.0.0",
    "css-loader": "^5.1.1",
    "file-loader": "^6.2.0",
    "html-loader": "^1.3.2",
    "html-webpack-plugin": "^4.5.2",
    "mini-css-extract-plugin": "^1.3.9",
    "node-sass": "^5.0.0",
    "sass-loader": "^10.1.1",
    "style-loader": "^2.0.0",
    "webpack": "^4.46.0",
    "webpack-cli": "^4.5.0",
    "webpack-dev-server": "^3.11.2"
  }

Webpack 已编译但不提供 img(jpg)

1 个答案: