webpack转译JS

webpack 官方文档
webpack 中文文档

转译步骤

1. 创建目录，本地安装webpack

mkdir webpack-demo  //创建webpack-demo目录
cd webpack-demo     //进入webpack-demo目录
npm init -y         //创建package.json文件                       
yarn add webpack@4 webpack-cli@3 --dev  //本地安装webpack

2. 新建js文件，准备转译
   1. 在webpack-demo目录创建src/index.js文件
   2. 打开index.js文件，写入console.log('hi')
3. 启动webpack，终端输入npx webpack 或者是./node_modules/.bin/webpack (原因，webpack由于不是全局安装，为本地安装，所以会用这两种启动webpack的方法。)
4. 打开新产生的dist目录下的main.js文件

操作步骤截图

npm init -y

yarn add webpack@4 webpack-cli@3 --dev

由下图可以看到webpack在node_modules/.bin目录里

创建src/index.js文件

启动webpack

node18执行webpack报错

两种解决办法：

• 降级node到16（卸载重装）(推荐)
• 先执行export NODE_OPTIONS=--openssl-legacy-provider, 再执行webpack命令