使用Webpack时因导入问题出现资源加载失败错误

核心问题梳理 #

• 页面同时加载Webpack打包产物/dist/main.js和未打包的index.js，导致模块重复加载，且未打包文件的导入路径在浏览器环境下无法被正确解析
• 手动指定big.js的本地路径，违背Webpack自动解析node_modules模块的机制
• 直接在HTML中引用未经过Webpack处理的CSS文件，若为SCSS格式则无法被编译
• importmap与Webpack的模块打包功能冲突，多余的ES模块垫片脚本增加了复杂度
• Windows环境下的clean脚本使用Linux的rm命令，无法正常执行

分步修复方案 #

1. 调整index.html，仅加载Webpack打包后的文件 #

移除未打包的index.js导入和多余的ES模块相关脚本，只保留打包后的main.js引用，同时将CSS依赖移到JS中导入：

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Serial Dilution Diagram Generator User Prompts</title>
</head>
<body id="mainBody">
  <div id="navigation">
    <!-- ... 页面布局代码 ...-->
  </div>
  <script src="/dist/main.js"></script>
</body>
</html>

2. 修正index.js中的导入路径 #

将big.js的导入改为标准模块引用，Webpack会自动从node_modules中查找：

import {Modal, Collapse} from "bootstrap";
import Big from "big.js"; // 修正此处路径
import {is, serialDilutionTable} from "./modules/serialDilutionTable.js";
import {mainAlgo} from "./modules/SerialDilutionAlgorithm.js";
import {resetDiagramInnerHtml} from "./modules/svgFunctions.js";
import {unitCheckmarkAdd, setupDiagramToolbar} from "./modules/diagramToolbar.js";
import "./SassFormStyle.scss"; // 导入SCSS文件，让Webpack处理样式

// 初始化函数直接在index.js中调用
function setupUserPrompts() {
  // 原函数逻辑
}
setupUserPrompts();
setupDiagramToolbar();

3. 优化webpack.config.js配置 #

• 移除未使用的LodashModuleReplacementPlugin（若未用到Lodash）
• 使用Webpack5原生asset/resource替代file-loader
• 可选添加html-webpack-plugin自动生成HTML，避免手动维护脚本引用

const webpack = require('webpack');
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin'); // 需要安装：npm i -D html-webpack-plugin

const config = {
    entry: './index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'main.js',
        clean: true // 自动清理dist目录，替代clean脚本
    },
    devtool: 'eval-source-map',
    module: {
        rules: [
            {
                test: /\.js$/,
                use: 'babel-loader',
                exclude: /node_modules/
            },
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            },
            {
                test: /\.scss$/,
                use: ['style-loader', 'css-loader', 'sass-loader']
            },
            {
                test: /\.svg$/,
                type: 'asset/resource' // Webpack5推荐的资源处理方式
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './index.html' // 基于原HTML生成带打包脚本的新文件
        })
    ]
};

module.exports = config;

4. 修正package.json脚本 #

适配Windows环境修改clean命令，可选添加开发服务器脚本：

{
  "main": "index.js",
  "dependencies": {
    "@popperjs/core": "^2.11.5",
    "big.js": "^6.2.1",
    "bootstrap": "^5.2.0",
    "bootstrap-icons": "^1.9.1"
  },
  "devDependencies": {
    "@babel/core": "^7.18.10",
    "@babel/preset-env": "^7.18.10",
    "autoprefixer": "^10.4.8",
    "babel-loader": "^8.2.5",
    "css-loader": "^6.7.1",
    "html-webpack-plugin": "^5.5.0",
    "node-sass": "^7.0.1",
    "postcss-loader": "^7.0.1",
    "sass-loader": "^13.0.2",
    "style-loader": "^3.3.1",
    "webpack": "^5.74.0",
    "webpack-cli": "^4.10.0",
    "webpack-dev-server": "^4.10.0" // 可选开发服务器
  },
  "scripts": {
    "clean": "del dist\\main.js",
    "build-dev": "webpack --mode development",
    "build-prod": "webpack --mode production",
    "start": "webpack serve --mode development" // 开发服务器启动命令
  }
}

5. 安装缺失依赖（若添加了新插件） #

执行命令：

npm install -D html-webpack-plugin webpack-dev-server

验证步骤 #

1. 执行npm run build-dev打包项目
2. 执行npm start启动开发服务器（或直接打开dist目录下的index.html）
3. 检查浏览器控制台是否还有资源加载失败错误

内容的提问来源于stack exchange，提问作者ptellier