配置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快速初始化项目
⒉.在项目根目录创建 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页面中，创建容器
