webpack插件的作用是什么？怎样安装webpack插件

webpack 插件的作用的作用是什么？

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

① webpack-dev-server

    类似于 node.js 阶段用到的 nodemon 工具

    每当修改了源代码，webpack 会自动进行项目的打包和构建

② html-webpack-plugin

    webpack 中的 HTML 插件（类似于一个模板引擎插件）

    可以通过此插件自定制 index.html 页面的内容

webpack-dev-server 可以让 webpack 监听项目源代码的变化，从而进行自动打包构建。
运行如下的命令，即可在项目中安装webpack插件：

npm install webpack-dev-server@3.11.0 -D

下面进行webpack-dev-server配置，修改package.json -> scripts中的dev命令：

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

}

再次运行npm run dev 命令，重新进行项目的打包，在浏览器中访问http://localhost:8080 地址，查看自动打包效果，注意webpack-dev-server 会启动一个实时打包的http 服务器。


多学一招：
打包生成的文件哪儿去了？
①不配置webpack-dev-server 的情况下，webpack 打包生成的文件，会存放到实际的物理磁盘上：
    严格遵守开发者在webpack.config.js 中指定配置
    根据output 节点指定路径进行存放
②配置了webpack-dev-server 之后，打包生成的文件存放到了内存中：
    不再根据output 节点指定的路径，存放到实际的物理磁盘上
    提高了实时打包输出的性能，因为内存比物理磁盘速度快很多
生成到内存中的文件该如何访问？
webpack-dev-server 生成到内存中的文件，默认放到了项目的根目录中，而且是虚拟的、不可见的。
可以直接用/ 表示项目根目录，后面跟上要访问的文件名称，即可访问内存中的文件，例如 /bundle.js 就表示要访问webpack-dev-server 生成到内存中的bundle.js 文件。