webpack中的插件

一，webpack-dev-server

修改源码后，webpack自动进行项目的打包和构建

1.安装webpack-dev-server

运行如下命令

npm install webpack-dev-server@3.11.2 -D

2.修改package.json文件

将package.json中scripts中的dev修改如下：

"scripts": {
    "dev": "webpack serve"
 },

运行 npm run dev
打开http://localhost:8080/进行查看

二、html-webpack-plugin

1.安装html-webpack-plugin

作用：复制指定页面。
复制之后的页面存储在内存中。
运行如下命令：

npm install html-webpack-plugin@5.3.2 -D

2.配置html-webpack-plugin

//1.导入html插件，得到一个构造函数
const HtmlPlugin = require('html-webpack-plugin')
//2.创建html插件的实例对象
const htmlPlugin = new HtmlPlugin({
	template:'./src/index.html',//指定原文件的存放路径
	filename:'./index.html',//指定生成文件我存放路径
})
//使用node.js中的导出语法，向外导出一个webpack的配置文件
module.exports = {
	//webpack的运行模式，可选development和production
	mode:'development',
	plugins:[htmlPlugin],//3.通过plugins节点使htmlPlugin插件生效
}

3.html-webpack-plugin的特性

①通过HTML插件复制到项目根目录中的index.html页面被放置到了内存中。
②HTML插件生成的index.html页面，自动注入了打包的js文件

三、devServer

对webpack-dev-server插件进行更多的配置

devServer:{
		open:true,//初次完成打包后，自动打开浏览器
		host:'127.0.0.1',//实时打包使用的主机地址
		port:80//实时打包使用的端口号,在http协议中，端口号为80，可省略
}

注：每次更新package.json和webpack.config.js等配置文件之后，需进行重启