打算用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')]
},
},
}
]
}
}
依赖
打包后在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>
运行结果:
试过很多方法,依旧报这个错,第一次尝试打包,不知如何解决,直接导入打包前的index.js是运行成功的,希望能帮帮忙~