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