webpack打包esm
时间: 2023-08-31 20:12:42 浏览: 59
你可以使用 webpack 来打包 ES 模块(ESM)。下面是一个简单的配置示例:
首先,确保你已经安装了 webpack 和 webpack-cli:
```shell
npm install webpack webpack-cli --save-dev
```
然后,在你的项目根目录下创建一个名为 webpack.config.js 的文件,并添加以下内容:
```javascript
const path = require('path');
module.exports = {
mode: 'production',
entry: './src/index.js', // 入口文件路径
output: {
path: path.resolve(__dirname, 'dist'), // 输出路径
filename: 'bundle.js', // 输出文件名
libraryTarget: 'module', // 设置目标为 ESM
},
experiments: {
outputModule: true, // 启用 ESM 输出
},
};
```
在上面的示例中,假设你的入口文件是 `src/index.js`,输出文件将被打包到 `dist/bundle.js`。
接下来,在你的 package.json 文件中添加以下脚本:
```json
{
"scripts": {
"build": "webpack"
}
}
```
然后,在终端运行以下命令来执行打包:
```shell
npm run build
```
Webpack 将会根据配置文件进行打包,并生成一个符合 ESM 规范的 bundle.js 文件。
请注意,ESM 目前还处于实验阶段,一些浏览器可能不支持或支持不完整。在使用 ESM 时,请确保你的目标环境已经支持该功能或提供了必要的 polyfill。
相关推荐
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)