安装Webpack5后仍报无法在模块外使用import语句如何解决

Uncaught SyntaxError: Cannot use import statement outside a module

• 安装缺失的构建依赖
  执行以下命令安装webpack配套工具、Vue单文件组件解析所需依赖，版本和本地Vue 2.x版本保持匹配：

  npm install -D webpack-cli vue-loader@15 vue-template-compiler@2.6.14
  

• 修正webpack配置
  由于package.json中已声明"type": "module"，原有CommonJS规范的配置写法会加载失败，同时缺失.vue文件解析规则，将webpack.config.js内容替换为以下配置：

  import { VueLoaderPlugin } from 'vue-loader'
  
  export default {
    entry: './index.js',
    output: {
      module: true,
      format: 'esm'
    },
    experiments: {
      outputModule: true
    },
    module: {
      rules: [
        {
          test: /\.vue$/,
          loader: 'vue-loader'
        }
      ]
    },
    plugins: [
      new VueLoaderPlugin()
    ]
  }
  

• 添加构建脚本
  在package.json的scripts字段中添加构建命令：

  {
    "scripts": {
      "build": "webpack --mode development"
    }
  }
  

• 执行构建生成可用产物
  运行npm run build，webpack会自动解析入口文件的import语法、处理依赖的.vue单文件组件，打包生成的产物默认输出到dist目录，直接引用该目录下的打包文件即可正常运行，不会再出现import语法报错。

• 不要直接在浏览器中引用未经过构建的原始index.js文件：浏览器原生无法识别.vue后缀的资源，即使给script标签添加type="module"属性也无法正常加载Vue组件。
• 所有依赖、源码的import/export语法都会被webpack正确解析处理，支持引入任意npm包、非.js后缀的资源，只要新增对应loader规则即可扩展支持的文件格式。
• 以上操作均未调整要求固定的项目目录结构，仅修改配置文件内容、补充必要依赖，符合插件组件开发的强制规范。

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