[webpack]打包时遇到的一些问题2023-8-14

问题1

浏览器报错  Uncaught SyntaxError: Cannot use import statement outside a module

问题原因  ：在 html 文件引入的 js 文件中使用ECMAScript 标准导入模块，浏览器默认

        不支持模块化的 JavaScript

解决方案  ：html 文件中引入 js 文件时 <script> 标签中加入 type="module" 属性

<script src="../src/login/index.js" type="module"></script>

问题2

浏览器报错 Uncaught ReferenceError: require is not defined

问题原因  ：浏览器不支持使用CommonJS模块化的方式加载模块

解决方案  ：

        1.使用浏览器原生支持的模块化方式，如 ES6 的 import 语法

import moduleName from 'module-name';

        2.尝试使用 Browserify 或 Webpack 等工具来将模块打包成适用于浏览器的格式

        3.确保所需的模块已正确安装并包含在项目的依赖项中，可以使用 npm 或 yarn 等包管理工具进行安装

问题3

node 运行 js 文件时报错 SyntaxError: Cannot use import statement outside a module

问题原因  ：在 Node.js 中，默认不支持 ES 模块化

解决方案  ：在 package.json 文件中加入 "type": "module" 属性

 问题4

webpack 打包时报错 ReferenceError: require is not defined in ES module scope, you can use import instead

问题原因  ：webpack 配置文件 webpack.config.js 使用的是默认的CommonJS 标准语法

        而之前使用 node 的时候将 package.json 中 "type" 属性的值改成了 "module" 

解决方案  ：将 package.json 文件中 "type": "module" 属性改成  "type": "CommonJS" 或者直接删掉