Webpack多页面项目中jQuery导入失败问题求助

问题详情 #

我创建了一个Node/Webpack项目用于展示两个HTML页面，index.js文件可正常导入jQuery包，但通过首页打开的another.html页面无法直接导入jQuery。相关项目信息如下：

项目结构 #

[项目结构图片]

index.html #

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Getting Started</title>
  </head>
  <body>
      <button onclick="openNewPage()">This is a test page...</button>
      <script src="main.js"></script>
      <script type="text/javascript">
          $(function () {
              console.log('this is main page...')
          });


          function openNewPage() {
              console.log('open ...')
              window.open('another.html')
          }
      </script>
  </body>
</html>

index.js #

import _ from 'lodash';

import jquery from 'jquery';
var $ = require("jquery");
window.$ = $;


function component() {
  const element = document.createElement('div');

  // Lodash, now imported by this script
  element.innerHTML = _.join(['Hello', 'webpack'], ' ');

  return element;
}

document.body.appendChild(component());

another.html #

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Another Page...</title>
  </head>
  <body>
      <div>Hi, I am another page...</div>
      <script type="module" src="another.js"></script>
      <script type="text/javascript">
          $(function () {
              console.log('this is another page...')
          });
      </script>
  </body>
</html>

another.js #

import jquery from 'jquery';
var $ = require("jquery");
window.$ = $;

import setting from '../setting.js'

package.json #

{
  "name": "getting-started-using-a-configuration",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "start": "serve dist"
  },
  "keywords": [],
  "author": "",
  "license": "MIT",
  "dependencies": {
    "lodash": "^4.17.21",
    "jquery": "^3.5.1"
  },
  "devDependencies": {
    "serve": "^12.0.0",
    "webpack": "^5.38.1",
    "webpack-cli": "^4.7.2"
  }
}

webpack.config.js #

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist'),
  },
};

错误信息 #

Uncaught ReferenceError: $ is not defined
    at another:11:11
Uncaught TypeError: Failed to resolve module specifier "jquery". Relative references must start with either "/", "./", or "../".

解决方案 #

1. 配置Webpack多入口打包 #

修改webpack.config.js，添加another.js作为入口，让Webpack处理该文件的依赖解析：

const path = require('path');

module.exports = {
  entry: {
    main: './src/index.js',
    another: './src/another.js'
  },
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist'),
  },
};

2. 调整another.html的脚本加载逻辑 #

• 移除another.js的type="module"属性（Webpack打包后的文件不是原生ES模块）
• 将内联脚本移到another.js之后，确保$已挂载到全局：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Another Page...</title>
  </head>
  <body>
      <div>Hi, I am another page...</div>
      <script src="another.js"></script>
      <script type="text/javascript">
          $(function () {
              console.log('this is another page...')
          });
      </script>
  </body>
</html>

3. 优化another.js的导入代码 #

统一导入方式，修正setting.js的路径（假设其与another.js同目录）：

import $ from 'jquery';
window.$ = $;

import setting from './setting.js';

4. 确保HTML文件位置正确 #

将index.html和another.html都放到dist目录下，保证打包后资源路径可正常访问。

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