开发者学堂课程【React 入门与实战：配置 html-webpack-plugin 插件】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/585/detail/8080
配置 html-webpack-plugin 插件
目录
一、实战演示
二、课堂笔记
一、实战演示
1）Package.json 部分代码展示：
"name": "01.webpack-base" ,
"version" : "1.0.o",
"description" : ""，
"main" : "index.js" ,
"scripts": {
"test": "echo \ "Error: no test specified\
" && exit 1"，
"dev" : "webpack-dev-server --open --port 3000 --hot --host 127.0.0} ,
"keywords": [,
["author": "","license": "ISC" ,"devDependencies" : {
"webpack" : "4.1.1".
//注意：不要反复使用 Ctrl X ，因为这样会使得磁盘
损坏。
2）Index.js 部分内容展示：
1 //假设，main.js 还是我们的入口文件
2 console.log (' no ')l
3// webpack-dev-server 打包好的 main.js 是托管到了内存中;所以在项目根目录中看不到;
4,//但是，我们可以认为，在项目根目录中，有一个看不见的 main.js
在终端处输入：
>npm run dev
//点击 src ，在浏览器中弹出以下图片：
//这里的 src 也可以存储到内存中去。
//在终端处输入以下指令
cnpm I html-webpack-plugin -D
进入 Webpack.config.js 进行相关配置：
const path = require( 'path')
const Htm1WebPackPlugin = requize ( 'htm1-webpack-plugin')
//导入在内存中自动生成 index 页面的插件
//创建一个插件的实例对象
const htmlPlugin = new HtmlwebPackPlugin(i
template: path.join(__dirname,'./src/index.html ')，//源文件filename :'index. html’
//生成的内存中首页的名称
//向外暴露一个打包的配置对象;因为 webpack是基于Node构建的;所以 webpack支持所有Node APr和语法
module.exports = {
mode : 'development',ll developmentproduction
//在 webpack 4.x 中，有一个很大的特性，就是约定大于配置﹑约定，默认的打包入口路径是
src -> index.js
plugins: [
htm1P1ugin
}
}
//在终端处输入 npm run dev
//127.0.0.1就是根目录。右键查看源码
<html lang"en">
<he ad>
<meta charset="UTF-8">
<meta name="viewport" cantert="widtedevice-width,initial-scale=1.0">
<meta http-equiv="X-UA-Compaatible"cont ent="ie-edge">
<title> Index首页<title>
<!--<script sr="../dist/main js">
</ script〉一><script src=” /mainjs"><l script>
</head>
<body>
<h1>这是首页</h1>
<script type="text/ javascript"src= main. js >< script/body>
//多出来的这一行是因为添加了html-webpack-plugin这个插件。
</htm1>
总结：html-webpack-plugin 这个插件的两个作用：
第一：生成打包文件
第二：自动生成 index 文件目录。
二，课堂笔记
1，安装此插件可以帮助我们将页面生成到内存空间之中去。安装代码如下：
pS c:\Users\liulongbin\Desktop\(react-day1\代码
\01.webpack-base> cnpm i html-webpack-plugin -Dl[0/1] Installing source-map@o.5.x
2，导入插件
const path = require ( 'path')
const Htm1webPackPlugin = require ( 'htm1-webpack-plugin ')
//导入、在内存中自动生成 index 。页面的插件
3，如何使用该插件
只需在配置文件中创建一个 plugin 节点即可，然后在节点中 new 出来即可，代码如下：
const htm1Plugin= new HtmlwebPackP1ugin ( {
template: path.join(__dirname,’.src/index .html )，//源文件filename : ·index.html;
//生成的内存中首页的名称
4,将插件放入 plugin 中，代码如下：
plugins: [
htm1Plugin
]
b）,创建基本的 webpack4.x 项目
1.运行 npm init -y 快速初始化项目
2.在项目根目录创建 src 源代码目录和 dist 产品目录
3.在 src 目录下创建 index.html
4.使用 cnpm 安装 webpack ，运行 cnpm i webpack webpack-cli -D
如何安装 cnpm :全局运行 npm i cnpm -g
5.注意: webpack 4.x 提供了约定大于配置的概念;目的是为了尽量减少配置文件的体积;
o 默认约定了:
。打包的入口是 src-> index.js。
打包的输出文件是 dist ->main.js
o4.x 中新增了 mode 选项(为必选项)，
可选的值为: development 和 production ;
c)在项目中使用 react
运行 cnpm i react react-dom -s 安装包 o react : 专门用于创建组件，同时组件的生命周期都在这个包中 o react-dom :专门进行 DOM 操作的，最主要的应用场景，就是 ReactDOM.render()2.在 index.htm1 页面中，创建容器
