webpack学习笔记————配置Html插件
上一篇简单介绍了webpack的基础配置，将js打包到dist目录下生成main.js,这一篇将介绍关于Html的插件
首先 安装webpack自带的webpack-dev-server服务器，方便之后的项目的运行
npm install webpack-dev-server
接着可以使用npx webpack-dev-server来启动项目，但是通常来说我们更喜欢这样做，在package.json中添加如下代码：
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js --host 172.20.10.6",
"start": "npm run dev"
}
然后运行
npm run dev
或
npm start
接下来就可以通过ip+端口来访问你的页面了
解释一下几个参数，其中：
- dev-server 有两种不同模式（inline mode、iframe 模式），默认情况下，应用程序启用内联模式(inline mode)
- progress 将运行进度输出到控制台
- host 指定使用一个 host。默认是 localhost，这里我写的是自己电脑的ip，这样你就能通过ip+端口来访问了，如果你想在移动端调试你的代码，可以在草料二维码 中，将自己的ip及端口生成二维码，然后手机扫码就可以了，注意要在同一个局域网下。
上面的部分都是基于默认的配置，接下来我们进行具体的配置
在webpack配置文件webpack.config.js中，在moudle.exports里加如如下的配置：
devServer: {
hot: true,//启用 webpack 的模块热替换特性
port:3000,
progress:true,
contentBase:'./build',//默认情况下，将使用当前工作目录作为提供内容的目录，但是你可以修改为其他目录：如build
contentBase: false, // since we use CopyWebpackPlugin.
compress: true,//一切服务都启用gzip 压缩：可以不用配置
open: true,//服务启动后自动打开浏览器
publicPath: config.dev.assetsPublicPath,
},
更多的配置请参见官网：webpack-dev-server
Html 插件
首先，我们现在src目录下新建一个html模板，具体如下：
index.html
...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--模板-->
</body>
</html>
npm 安装插件
npm install html-webpack-plugin
在配置文件中引入：
const HtmlWebpackPlugin = require('html-webpack-plugin')
在配置文件的moudle.exports中加如下配置：
plugins: [//数组，放着所有的插件
new HtmlWebpackPlugin({
filename: 'index.html',//打包后的文件名
template: './src/index.html',//模板html
minify: {//生产环境，压缩html，
removeAttributeQuotes: true, //去除双引号
collapseWhitespace: true //折叠空行，代码变成一行
},
})
hash:true //给html引用外部文件时加上hash
]
运行npm run build打包，打包后的html会出现在bound文件夹下，index.html。
其实在output的配置中也可以加上hash，[hash:8]表示8位的hash
output: {
filename: "bundle.[hash:8].js",//打包后的文件名
path: path.resolve(__dirname, 'build') //路劲必须是一个绝对路劲,_dirname指当前目录下的dist目录
},
关于html插件的具体用法 请参考：官方文档：https://www.webpackjs.com/plugins/html-webpack-plugin/
备注：本文是学习珠峰培训的webpack课程的学习笔记，后面会接着更新，相关的视频课程资源请见：webpack4.0****：https://download.csdn.net/download/qq_39040042/10968119
各位，一起加油，good luck！
下一篇： webug4.0—显错注入
推荐阅读
-
webpack学习笔记————配置Html插件
-
和斑码教育谢老师一起学习web前端课程-web前端课程笔记-第一天-HTML
-
《学习笔记75》—— # HTML # 解决table的双边框问题
-
HTML学习笔记 博客分类： JavaWeb开发之前端基础 htmlcss
-
[学习笔记]MacOS下使用Xcode配置opencv环境
-
MyBatis学习笔记——插件机制（AOP）
-
刘意JavaSE 学习笔记 Day1-Day6——环境配置，基本语法
-
jest 前端自动化测试配置和学习笔记
-
OpenCV学习笔记（11）：libfacedetection人脸检测的配置与使用
-
（六）高并发redis学习笔记：redis的RDB持久化机制配置以及数据恢复的实验