webpack插件的使用

webpack 插件的作用

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

        ① webpack-dev-server

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

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

        ② html-webpack-plugin

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

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

安装 webpack-dev-server

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

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

npm install webpack-dev-server@3.11.2 -D

配置 webpack-dev-server

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

  "scripts": {
    "dev": "webpack serve"  // scrpit节点下的脚本，可以通过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 生成到内存中的文件，默认放到了项目的根目录中，而且是虚拟的、不可见的。

可以直接用 / 表示项目根目录，后面跟上要访问的文件名称，即可访问内存中的文件

例如 /mian.js 就表示要访问 webpack-dev-server 生成到内存中的 mian.js 文件

所以我们知道了打包规则之后，我们就只需要将html下面的js脚本替换为内存中的即可

打开给我开启的服务器地址，我们就能访问到我们的根目录

 打开给我们的服务器地址，我们可以看到我们的根目录

 进入src目录 ，我们可以看到我们的页面了，页面功能也没有报错

到此为止，我们webpack-dev-server的插件就配置完成了

当我们在使用这个插件的时候，是不是会觉得每次打开的都是根目录 需要点击src目录进入页面显得相对麻烦吗？如何解决呢，这个时候我们就介绍一下，我们要学习的下一个插件。

安装 html-webpack-plugin （webpack热更新）

html-webpack-plugin 是 webpack 中的 HTML 插件，可以通过此插件自定制 index.html 页面的内容。 需求：通过 html-webpack-plugin 插件，将 src 目录下的 index.html 首页，复制到项目根目录中一份！

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

npm install html-webpack-plugin@5.3.2 -D

配置 html-webpack-plugin

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

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

① 通过 HTML 插件复制到项目根目录中的 index.html 页面，也被放到了内存中

② HTML 插件在生成的 index.html 页面，自动注入了打包的 bundle.js 文件

我们配置完成之后，在启动服务器，进入之后就可以直接进入网页啦

注意： html-webpack-plugin 插件，会自动帮我们注入script 标签，如果我们自己再引用一遍，那就会加载两遍了。

devServer 节点

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

// 使用Node.js的导出语法，向外导出一个webpack配置对象
module.exports = {
    // 代表webpack的开发模式，有两个值development和production。development代表开发模式；development代表生产模式，能够对代码进行压缩
    mode: "development",
    // entry 要处理的哪个文件
    entry:  path.join(__dirname, './src/index.js'),
    
    // 指定生成的文件要存放在哪里
    output: {
        // 存放的目录
        path: path.join(__dirname, 'dist'),
        // 生成的文件名
        filename: 'main.js'
    },
    plugins: [htmlPlugin], // 通过配置plugins节点，使htmlPlugin插件生效

    // 以通过 devServer 节点对 webpack-dev-server 插件进行更多的配置
    devServer: {
        open: true,  // 初次打包完成后自动打开浏览器
        host: 'localhost',  // 实时打包所用的打包地址
        port: 80  // 实时打包所用的端口号
    }
   
}

注意：凡是修改了 webpack.config.js 配置文件，或修改了 package.json 配置文件，必须重启实时打包的服 务器，否则最新的配置文件无法生效！