石榴笑了 2021-10-18 18:14 采纳率: 0%
浏览 138

关于webpack打包ES6模块遇到的问题

打算用webpack打包一个js文件,文件如下
index.js


```javascript
function webpackDemo(){
   this.name='slll',
   this.sex='girl'
}
export default webpackDemo


打包配置文件内容webpack.config.js


```javascript
// 导入处理路径的模块
const path = require('path');
// 导出一个配置对象,将来webpack在启动的时候,会默认来查找webpack.config.js,并读取这个文件中导出的配置对象,来进行打包处理
module.exports = {
  // mode: 'development',
  entry: './src/index.js', // 项目入口文件
  output: { //打包文件出口
    path: path.resolve(__dirname, 'dist'), // 配置输出的路径
    filename: 'asyncLoad.min.js', // 配置输出的文件名
    library: 'asyncLoad',
    libraryTarget: 'umd'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules|bower_components/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ['babel-preset-env'],
            plugins:[require('babel-plugin-transform-runtime')]
          },
        },
      }
    ]
  }
}

依赖

img

打包后在html页面导入,index.js

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>AsyncLoad</title>
</head>

<body>
  <script type="module">
    import webpackDemo from "../dist/asyncLoad.min.js"
    console.log(webpackDemo)
  </script>
</body>

</html>

运行结果:

img


试过很多方法,依旧报这个错,第一次尝试打包,不知如何解决,直接导入打包前的index.js是运行成功的,希望能帮帮忙~

  • 写回答

1条回答 默认 最新

  • 技术专家团-剑客 2021-10-18 18:28
    关注

    libraryTarget:“umd”,该方案支持commonjs、commonjs2、amd。支持require引入,不支持import引入。
    可以看下打包后的文件:
    import 直接引入,需要export default 导出。

    评论

报告相同问题?

问题事件

  • 创建了问题 10月18日

悬赏问题

  • ¥15 Vue3 大型图片数据拖动排序
  • ¥15 划分vlan后不通了
  • ¥15 GDI处理通道视频时总是带有白色锯齿
  • ¥20 用雷电模拟器安装百达屋apk一直闪退
  • ¥15 算能科技20240506咨询(拒绝大模型回答)
  • ¥15 自适应 AR 模型 参数估计Matlab程序
  • ¥100 角动量包络面如何用MATLAB绘制
  • ¥15 merge函数占用内存过大
  • ¥15 使用EMD去噪处理RML2016数据集时候的原理
  • ¥15 神经网络预测均方误差很小 但是图像上看着差别太大