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等配置文件之后,需进行重启

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值