webpack使用之插件应用（2）

1.webpack插件的作用

通过安装和配置第三方的插件，可以拓展webpack的能力，从而让webpack用起来更方便。最常用的webpack插件有如下两个：
① webpack-dev-server

• 类似于node.js阶段用到的nodemon工具
• 每当修改了源代码，webpack会自动进行项目的打包和构建

② html-webpack-plugin

• webpack中的HTML插件(类似于一个模板引擎插件)
• 可以通过此插件自定制index.html页面的内容

1.1webpack-dev-server

作用：可以让webpack监听项目源代码的变化，从而进行自动打包构建。

1.1.1 安装webpack-dev-server
运行如下的命令，即可在项目中安装此插件：

npm install webpack-dev-server@3.11.0 -D 

1.1.2 配置webpack-dev-server

①修改package.json==>scripts中的dev命令如下：

"scripts":{
	"dev":"webpack serve"//script节点下的脚本，可以通过npm run 执行
}

② 再次运行npm run dev 命令，重新进行项目的打包
③ 在浏览器中访问http://localhost:8080 地址，查看自动打包效果

1.1.3 打包生成的文件去哪了？

① 不配置webpack-dev-server 的情况下，webpack打包生成的文件，会存放到实际的物理磁盘上。

• 严格遵守开发者在webpack.config.js 中指定配置
• 根据output 节点指定路径进行存放

② 配置了webpack-dev-server之后，打包生成的文件存放了内存中

• 不在根据output节点指定的路径，存放到实际的物理磁盘上
• 提高了实时打包输出的性能，因为内存比物理磁盘速度快很多

1.1.4 生成到内存中的文件该如何访问？

webpack-dev-server 生成到内存中的文件，默认放到了项目的根目录中，而且的是虚拟的、不可见的。

1.2 html-webpack-plugin

html-webpack-plugin 是webpack中的html插件，可以通过此插件自定制index.html页面的内容。

如果有这样的需求：通过html-webpack-plugin插件，讲src目录下的index.html首页，复制到项目根目录中一份。*

1.2.1 安装html-webpack-plugin

运行如下的命令，即可在项目中安装此插件:

npm install html-webpack-plugin@4.5.0 -D

1.2.2 配置html-webpack-plugin

//1.导入HTML插件，得到一个构造函数
const HtmlPlugin=require('html-webpack-plugin')
//2.创建HTML插件的实例对象
const htmlPlugin=new HtmlPlugin({
	tempalte:'./src/index.html',//指定源文件的存放路径
	filename:'./index.html',//指定生成文件的存放路径
})

module.exports={
	mode:'development',
	plugins:[htmlPlugin],//3.通过plugins节点，使htmlPlugin插件生效
}

**1.2.3 解惑html-webpack-plugin **

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

如果开启了实时打包，dist就可以删掉了，因为打包生成的文件并没有放在磁盘上，而是放在内存中，

2.devServer节点

在webpac.config.js配置文件中，可以通过devServer及诶单对webpack-dev-server插件进行更多的配置，示例代码如下：

devServer:{
	open:true,//初次打包完成后，自动打开浏览器
	host:'127.0.0.1',//实时打包所使用的主机地址
	port:80,//实时打包所使用的端口号
}