第1课|React框架背后的核心机理(webpack安装和使用)

步骤：

1.新建文件夹toy-react，打开VSCode 运行和调试，创建launch.json运行环境，选chrome；

2.终端命令行npm init，一路回车；

3.npm install webpack webpack-cli --save-dev 安装webpack并加到package.json中的devDependencies中；

4.npx webpack执行打包；

5.创建webpack.config.js，使用module.exports标准写法加入entry；设置入口为main.js；

6.创建空的main.js文件，执行npx webpack；生成dist文件夹，打开main.js查看到的是压缩的代码；

7.设置查看压缩代码的配置，方便阅读，执行npx webpack

 

 

 

 

8.安装babel-loader。npm install --save-dev babel-loader @babel/core @babel/preset-env

9.添加webpack的babel-loader配置

10.编写以下代码，在浏览器中打开main.html，查看console输出及main.js两个文件源码的差异

11.使用jsx语法准备工作，执行npm install @babel/plugin-transform-react-jsx --save-dev 安装babel的plugin

配置使用插件

12.执行npx webpack，查看浏览器F12

13.配置自定义名称

14.解决main.js中createElement报错的问题"createElement is not defined"

function createElement (tagName, attributes, ...children) {

  return document.createElement(tagName);

}

15.完善createElement()实现编写JSX

也可以直接添加到body标签中