序言
安装Node
配置npm
配置npm在安装全局模块时的路径和缓存cache的路径
因为在执行例如npm install webpack -g等命令全局安装的时候，默认会将模块安装在C:Users用户名AppDataRoaming路径下的npm和npm_cache中，不方便管理且占用C盘空间，
所以这里配置自定义的全局模块安装目录，在node.js安装目录下新建两个文件夹 node_global和node_cache，如图所示：
然后在cmd命令下执行如下两个命令：
npm config set prefix "D:WebNode
odejs
ode_global"
npm config set cache "D:WebNode
odejs
ode_cache"
配置环境变量
执行完后，配置环境变量，如下：
“环境变量” -> “系统变量”：新建一个变量名为 “NODE_PATH”， 值为“D:WebNode odejs ode_global”
“环境变量” -> “用户变量”：编辑用户变量里的Path，将相应npm的路径（“C:Users用户名AppDataRoaming pm”）改为：“D:WebNode odejs ode_global”
创建基本的webpack4.x项目
-
运行
npm init -y快速初始化项目 -
在项目根目录创建
src源代码目录和dist产品目录 -
在 src 目录下创建
index.html -
使用 cnpm 安装 webpack ，运行
cnpm i webpack webpack-cli -D-
如何安装
cnpm: 全局运行npm i cnpm -g
-
-
注意：webpack 4.x 提供了 约定大于配置的概念；目的是为了尽量减少 配置文件的体积；
-
默认约定了：
-
打包的入口是
src->index.js -
打包的输出文件是
dist->main.js -
4.x 中 新增了
mode选项(为必选项)，可选的值为：development和production;
-
cnpm install webpack -g
cnpm install webpack-cli -g
webpack -v
VsCode无法运行cnmp命令解决办法
cnpm : 无法加载文件 C:software odejs ode_globalcnpm.ps1，因为在此系统上禁止运行脚本
以管理员身份运行windows powershell，运行命令set-ExecutionPolicy RemoteSigned即可。
html-webpack-plugin
Error: Cannot find module 'html-webpack-plugin'
cnpm i html-webpack-plugin -D
npm run build
package.json中的script:
"scripts": {
"test": "echo "Error: no test specified" && exit 1",
"build": "webpack --config webpack.config.js",
"dev": "webpack-dev-server --open --port 3000 --hot --host 127.0.0.1"
}
cnpm i webpack-dev-server -D
cnpm i webpack-cli -D
npm run dev
-
react： 专门用于创建组件和虚拟DOM的，同时组件的生命周期都在这个包中
-
react-dom： 专门进行DOM操作的，最主要的应用场景，就是
babel到底做了什么？怎么做的？
babel 7.x 结合 webpack 4.x 配置 的正确方法
https://www.pianshen.com/article/2145265814/
简单来说把 JavaScript 中 es2015/2016/2017/2046 的新语法转化为 es5，让低端运行环境(如浏览器和 node )能够认识并执行。
安装Babel依赖包
cnpm i @babel/core @babel/cli @babel/preset-env -D
说明：i是install的简写，core是Babel的核心库，cli是Babel命令行，preset-env是预设，-D 指的是安装在本地和 --save-dev作用一致。
.babelrc
{
"presets": ["@babel/preset-env"],
"plugins": ["@babel/plugin-transform-runtime"]
}
preset
官方内容，目前包括 env, react, flow, minify 等。这里最重要的是 env，后面会详细介绍。
stage-x，这里面包含的都是当年最新规范的草案，每年更新。
这里面还细分为
Stage 0 - 稻草人: 只是一个想法，经过 TC39 成员提出即可。
Stage 1 - 提案: 初步尝试。
Stage 2 - 初稿: 完成初步规范。
Stage 3 - 候选: 完成规范和浏览器初步实现。
Stage 4 - 完成: 将被添加到下一年度发布。