Vue
webpack插件之webpack-dev-serve和html-webpack-plugin
05-19 09:10webpack中的插件
通过安装和配置第三方插件，可以拓展webpack的能力，从而让webpack用起来更方便。本文介绍两个常用的webpack插件：
1、webpack-dev-server
在Webpack开发中，webpack-dev-server是一个非常有用的工具，它提供了一个简单的web socket服务器，实时重新加载(live reloading)功能。它让webpack监听源代码的变化，每当修改了源代码，webpack会自动进行项目的打包和构建。这对于开发阶段非常有用，因为它可以让你看到代码更改后的即时效果，无需手动刷新浏览器。
2、html-webpack-plugin
webpack中的HTML插件（类似于一个模版引擎插件），可以通过此插件自己定制index.html页面的内容
webpak-dev-server
安装
npm i webpack-dev-server -D
配置webpack-dev-server
1、修改package.json文件script中的dev命令（或者新增一行命令）
"scripts": {
"dev": "webpack serve"
}
2、运行 npm run dev，重新进行项目打包，此时webpack-dev-server会启动一个实时打包的http服务器，默认监听8080端口，当8080被占用时，监听端口变为8081、8082...
3、以本地IP为例，在浏览器中访问 http://localhost:8080，查看自动打包效果
devServer节点
在webpack.config.js配置文件中，可以通过devServer节点对webpack-dev-server插件进行更多配置，比如：
derServer: {
open: true, //初次打包完成后，自动打开浏览器
host: '127.0.0.1', //实时打包启动的http服务器，所使用的主机地址
prot: 80 //实时打包所使用的端口
}
打包文件的位置
- 不配置webpack-dev-server的情况下，webpack打包生成的文件，会存放到实际的物理磁盘上，且严格遵守开发者在webpack.config.js中指定配置，根据output节点指定路径进行存放。
- 配置了webpack-dev-server之后，打包生成的文件存放到了内存中，不再根据output节点指定的路径，存放到实际的物理磁盘上，但依然遵循output节点中配置的文件名，这样提高了实时打包输出的性能。文化默认放到了项目的根目录中，而且是虚拟的，不可见的。
webpack-dev-server版本对于生成文件的影响
- 在低版本的webpack-dev-server中，访问html静态文件，直接找到对应的目录打开即可，比如src目录下的index.html和app.html，访问 http://localhost:8080/src/app.html。
- 在高于webpack-dev-server@4.4.0版本中，默认使用__dirname/public目录用于提供静态文件（__dirname表示配置文件webpack.config.js所在的目录），比如public目录下的index.html和app.html，运行webpack-dev-server后，会在项目根目录下自动生成虚拟的index.html和app.html，直接访问 http://localhot:8080/app.html即可。
- 若不存在public目录，或目录下不存在html文件，则会报“Cannot GET ...”的错误。这时需要在webpack.config.js配置文件中使用directory指定其他目录，或者借助下面要说的插件html-webpack-plugin来实现。
注意：除html-webpack-plugin插件以外的方法，都需要在html文件中引入打包生成的虚拟js文件。
devServer: {
port: 8088, //指定端口
static: {
//path.join 用于连接多个路径片段并规范化路径
//__dirname 是指获取当前文件在当前项目中的准确路径
//具体路径：webpack.config.js所在目录下的src目录
directory: path.join(__dirname, 'src')
}
}
html-webpack-plugin
html-webpack-plugin是webpack中的HTML插件，可以通过此插件自定制index.html页面的内容。
比如：通过html-webpack-plugin插件，将src目录下的index.html文件，复制一份到项目根目录。
安装
npm i html-webpacl-plugin -D
配置html-webpack-plugin
打开webpack.config.js，加入以下配置
//导入 HTML 插件，用常量接收，得到一个构造函数（导入的是构造函数，首字母尽量用大写）
const HtmlPlugin = require('html-webpack-plugin');
//创建 HTML 插件的实例对象
const htmlPlugin = new HtmlPlugin({
template: './src/index.html', //指定原文件的存放路径
filename: './index.html', //指定生成文件的存放路径
})
module.exports = {
plugins: [htmlPlugin], //挂载插件实例对象：通过plugins节点，使htmlPlugin插件生效
}
html-webpack-plug说明
1、通过 HTML 插件复制到项目根目录中的index.html页面，也被放到了内存中
2、HTML插件生成的index.html页面的中，自动注入了打包生成的js文件
