创建基本webpack4.x项目以及在项目中使用React

软件：visual studio code或者 webstorm2019.1.1

一、创建基本的webpack4.x项目

1、创建项目文件夹 webpack ，并用webstorm打开

2、打开终端Terminal，快速初始化一个项目：

1 npm init -y

　　根目录下产生package.json文件。该文件定义了项目所需要的各个模块，以及项目的配置信息（比如名称、版本、许可证等元数据）；该文件可以手工编写，也可以使用上述命令自动生成；npm install 命令会根据这个配置文件，自动下载所需要的模块，也就是配置项目所需要的运行和开发环境。package.json文件中添加中文注释会编译出错。

3、在项目根目录下安装 webpack 和 webpack-cli (两者需要同时安装)，根目录下会产生一个node_modules文件夹。

1 cnpm i webpack webpack-cli -D

注意：使用 cnpm 命令前，需要先安装 cnpm。

npm i cnpm -g    //全局安装global

4、在项目根目录下创建 src 目录，在该目录下新建 index.html 和 index.js 文件。（html文件，输入！，再按Tab键会自动填充模板）

5、在项目根目录下创建 webpack.config.js 配置文件

module.exports = {
    mode: 'development', //mode模块有两种模式：developmentproduction,两种模式下main.js的大小不同，前大后小，进行了代码压缩
}

6、最后，在终端执行 webpack 进行打包，生成 dist/main.js 目录文件，将 main.js 引入 index.html 中即可。（复制HTML文件路径，在浏览器中打开）

1 <body>
2 　　<div>hehehe</div>
3 　　<script src="../dist/main.js"></script>
4 </body>

二、项目实时刷新

a、webpack-dev-server配置

cnpm install webpack-dev-server -g //全局安装
cnpm install webpack-dev-server -D //项目局部安装

b、在package.json 文件中的 "scripts" 中加入 “dev”

"scripts": {
    "test": "echo "Error: no test specified" && exit 1",
    "dev" : "webpack-dev-server --open chrome --port3000" //自动打开浏览器Chrome，端口号3000
  },

c、运行，结果如下图页面。

npm run dev

注意：1）若出现 cannot find module '名' ，可以执行 cnpm install -g 名和 cnpm install -D 名；2）考虑node版本问题

　　　　2)浏览器没有刷新是因为 webpack-dev-server 构建的 main.js ，其实是在 http://localhost:3000/main.js的位置，被托管到内存中，所以直接在index.html文件中引入：

<script src="/main.js"></script>

3)将index.html也放到内存中，减少磁盘的损耗，命令如下：

cnpm i html-webpack-plugin -D

在 webpack.config.js 中引入并配置导出：

const path = require('path');
const HtmlWebPackPlugin = require('html-webpack-plugin');//导入在内容中自动生成index页面的插件

//创建一个插件的实例对象
const htmlPlugin = new HtmlWebPackPlugin({
    template: path.join(__dirname, './src/index.html'),//源文件
    filename: 'index.html' //生成内存中的首页名称
});

module.exports = {
    mode: 'development', //mode模块有两种模式：developmentproduction,两种模式下main.js的大小不同，前大后小，进行了代码压缩
    plugins: [
        htmlPlugin
    ]
}

该操作直接将 index.html 放到了内存中，并自动引入了自动打包生成的 main.js 文件。重新运行npm run dev，结果如下：（其中荧光部分自动生成）

注意：每次修改 webpack.config.js 文件都需要重新运行 npm run dev；快捷键ctrl+C：终止编译。

三、在项目中使用React

1、在项目目录下安装包：

cnpm i react react-dom -S

react：专门用于创建组件和虚拟DOM，同时组件的生命周期都在这个包中；
react-dom：专门进行DOM操作，最主要的应用场景就是ReactDOM.render()。

1.1-----index.js文件

 1 //a、导入包：注意成员名称大小写；规定！！！
 2 import React from 'react'
 3 import ReactDOM from 'react-dom'
 4 
 5 //b、用React创建虚拟DOM元素（包含3个参数）
 6 //第一个参数：创建元素类型；字符串形式，表示元素名称（标签名）。
 7 //第二个参数：是一个对象或者null；表示当前该DOM元素的属性。
 8 //第三个参数：子节点（包括其他的虚拟DOM、文本子节点等）。。。参数n为其他子节点。
 9 const myh1 = React.createElement('h1',{id:'myh1',title:'this is a h1'},'这是h1的文本内容');
10 
11 //c、用ReactDOM把虚拟DOM渲染到页面上（2个类型参数）
12 //参数1：纯js或jsx创建的虚拟DOM对象；
13 //参数2：指定页面上（index.html）的一个容器，用来包含虚拟DOM元素的真实DOM元素对象(一般是一个div)。
14 ReactDOM.render(myh1,document.getElementById("app"))

1.2-----index.html文件

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport"
 6           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
 7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8     <title>Document</title>
 9 </head>
10 <body>
11 <!--在index.html中，创建一个容器，渲染虚拟DOM元素，会放到容器内显示-->
12 <div id="app"></div>
13 
14 <script src="/main.js"></script>
15 </body>
16 </html>

2、创建虚拟DOM的方式有两种，上面的index.js文件中的第一种创建方式一般不用；

创建虚拟DOM的第二种方法：JSX

2.1-----什么是虚拟DOM？

　　a)DOM的本质：浏览器的概念，用JS对象来表示页面上的元素，并提供了操作DOM对象的API；

　　b)React中的虚拟DOM：框架中的概念，是程序员用JS对象来来模拟页面上的DOM元素和DOM嵌套；

　　c)虚拟DOM的目的：为实现页面中DOM元素的高效更新。

2.2-----JSX

　　a)在JS文件中，默认不能写这种类似于html的文件，否则会打包失败；但可以用 babel 来转换这些JS中的标签；

　　b)在JS文件中，混合写入类似于HTML的语法，叫做JSX语法，是符合XML规范的JS；

　　c)JSX语法的本质：是在运行的时候，被转换成React.createElement形式再渲染，不是直接把jsx语句渲染到页面上。

2.3-----如何启用JSX语法

　　1、安装 babel 插件

cnpm i @babel/core babel-loader @babel/plugin-transform-runtime -D
cnpm i @babel/preset-env @babel/preset-stage-0 -D

　　2、安装能够识别转换JSX语法的包（将JS转换成React.createElement）

cnpm i @babel/preset-react -D

　　3、安装完上面1,2插件，在 webpack.config.js中进行配置，增加module块。

const path = require('path');
const HtmlWebPackPlugin = require('html-webpack-plugin');//导入在内容中自动生成index页面的插件

//创建一个插件的实例对象
const htmlPlugin = new HtmlWebPackPlugin({
    template: path.join(__dirname, './src/index.html'),//源文件
    filename: 'index.html' //生成内存中的首页名称
});

module.exports = {
    mode: 'development', //mode模块有两种模式：developmentproduction,两种模式下main.js的大小不同，前大后小，进行了代码压缩
    plugins: [
        htmlPlugin
    ],
    module:{  //所有第三方模块的配置规则
        rules: [  //第三方匹配规则
            {test: /.js|jsx$/, use:'babel-loader', exclude: /node_modules/},
            //使用use必须添加exclude排除项，否则跑不起来
        ]
    }

}

　　4、在项目根目录下创建 .babelrc配置文件（不能单引号，不能注释）

{
  "presets": ["@babel/preset-env","@babel/preset-react"],
  "plugins": ["@babel/plugin-transform-runtime"]
}

2.4-----在JSX中书写JS代码注意

在JSX语法中，要把JS代码写到{ }中
在JSX语法中，标签必须成对出现；如果是单标签，必须自闭和；
当编译引擎在编译JSX代码时，如果遇到<>，就当做HTML代码去编译；如果遇到了{ }就把花括号内部代码当做普通JS去处理。