Nodejs项目 webpack打包实测

前言：项目要在 Node.js 项目中使用 ES6 模板语法，并使用 webpack 打包。

需要进行以下步骤：

1. 安装必要的依赖项, 确保您的项目中已经安装了以下依赖项：

• webpack：用于打包您的项目
• babel-loader：用于将 ES6 代码转换为 ES5 代码
• @babel/core：用于提供 Babel 核心功能
• @babel/preset-env：用于转换 ES6 代码为 ES5 代码

使用以下命令进行安装：

npm install webpack babel-loader @babel/core @babel/preset-env --save-dev

2. 配置 webpack, 在您的项目根目录下创建一个名为 webpack.config.js 的文件，并添加以下内容：

import path from "path"

const __dirname = path.resolve();

export default {
    entry: './src/index.js',
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env']
                    }
                }
            }
        ]
    },
    output: {
        filename: 'main.js',
        path: path.resolve(__dirname, 'dist')
    }
};

此配置假定您的入口文件为 src/index.js，您的打包文件将被输出到 dist/main.js

3.配置 Babel,  在项目根目录下创建一个名为 .babelrc 的文件，并添加以下内容：

{
  "presets": ["@babel/preset-env"]
}

这将告诉 Babel 使用 @babel/preset-env 进行转换

4. 编写代码，在src/index.js任意发挥了

5.项目打包

npm run build

附ES6 模板语法配置文件package.json参考：

{
  "name": "node_es6_pro",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "type": "module",  // 此为关键，配置后不能用require语法，换成import
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "babel-node src/index.js",
    "build": "webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/cli": "^7.21.0",
    "@babel/core": "^7.21.4",
    "@babel/preset-env": "^7.21.4",
    "babel-loader": "^9.1.2",
    "webpack": "^5.80.0",
    "webpack-cli": "^5.0.2"
  },
  "dependencies": {
    "axios": "^1.3.5",
    "node-fetch": "^3.3.1",
    "qs": "^6.11.1"
  }
}