使用webpack5+babel打包js代码 前端工程化构建

大多数查到的教程都是webpack4的，webpack5的配置文件找了好久现有的基本都不可行，最后改来改去终于改好了，配置了三天环境人都快傻了，放上来供大家参考。

写在前面：

对于所有的npm命令（npm开头的就是）
如果很慢 关闭cmd 输入npm install -g cnpm --registry=https://registry.npm.taobao.org给npm换源

然后把每一个npm开头的命令 把npm改成cnpm

例如：npm i @babel/core babel-loader @babel/plugin-transform-runtime -D
改成 cnpm i @babel/core babel-loader @babel/plugin-transform-runtime -D

一、node.js安装
1、在安装webpack之前，需要安装node.js
关于安装方法：
官网下载 https://nodejs.org/en/

打开msi文件然后一路点击下一步即可，期间可以更改安装目录（注：这一步的安装目录一定要自己记住绝对路径）

2、配置系统变量
安装完成后（需要配置环境变量（用户变量或者系统变量都行）：新建NODE_PATH，取值为你在安装node时选择的的安装路径，如：E:\Program Files\nodejs\），

如果你有一个统一的变量Path，直接在Path里面新建路径也可以

运行cmd，执行node -v和npm -v命令查看安装情况。如执行结果如下图，说明安装成功。

3、在nodejs安装目录下创建node_global和node_cache两个文件夹（若已存在则无需创建）

4、运行cmd 分别运行以下两个命令（引号内的是你上一步创建的文件夹的路径）

npm config set prefix " D:\application\nodejs\node_global" 
npm config set cache " D:\application\nodejs\node_cache"