zoukankan      html  css  js  c++  java
  • webpack插件解析:HtmlWebpackPlugin是干什么的以及如何使用它

    HtmlWebpackPlugin是一个出现频率比较高的webpack插件,本文对其作用和配置作一番比较详细的分析(本文的配置均在webpack.config.js中进行)。

    为何使用它

    简单来说,HtmlWebpackPlugin是用于生成html文件。我们的疑问可能在于,webpack本身不能生成html文件吗?事实上,默认的webpack主要是用于处理js文件的依赖图构建和打包,当需要生成html文件时,便需要使HtmlWebpackPlugin插件。

    如何安装

    作为开发依赖安装即可:

    npm install --save-dev html-webpack-plugin
    

    如何在webpack.config.js中配置该插件

    const HtmlWebpackPlugin = require('html-webpack-plugin');
    module.exports  = {
      ...
      plugins: [new HtmlWebpackPlugin()]
    };
    

    以上配置中,首先使用了require引入插件,首字母开头表明是一个构造函数,而后使用new语句创建一个实例,并将其作为webpackConfig的plugins选项的一个数组成员,这样表示webpack打包时将使用HtmlWebpackPlugin插件。
    这里没有做HtmlWebpackPlugin的任何额外配置,实际上它的默认配置将会生效。

    默认配置是如何工作的

    在以上配置中,HtmlWebpackPlugin就已经会生效,只不过是应用的默认配置。默认配置如下:

    • 默认配置会在出口目录中通过output.path选项配置)生成一个index.html文件;
    • 生成的index.html文件将会以script标签的形式引入每一个输出js文件(通过output.filename选项配置)。

    现在我们把其他基本配置补充完整:

    const path = require('path');
    const HtmlWebpackPlugin = require('html-webpack-plugin');
    
    module.exports = {
        mode:'development',
        entry:{
            app:path.resolve(__dirname,'./index.js'),
            test:path.resolve(__dirname,'./test.js')
        },
        output:{
            path: path.resolve(__dirname,'./dist'),
            filename:'[name]_bundle.js'
        },
        plugins:[new HtmlWebpackPlugin()]
    }
    

    以上配置中,先抛开HtmlWebpackPlugin来分析打包结果:由于项目中存在两个入口,出口(输出文件)使用了占位符,因此结果是在dist目录下生成两个js文件即app_bundle.jstest_bundle.js两个文件。

    根据上面所述的默认配置,那么除此之外,还会在dist目录下生成一个index.html文件,它以script标签的形式引入app_bundle.jstest_bundle.js,即:

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="UTF-8">
        <title>Webpack App</title>
      </head>
      <body>
      <script type="text/javascript" src="app_bundle.js"></script>
      <script type="text/javascript" src="test_bundle.js"></script>
      </body>
    </html>
    

    修改默认配置

    假如想要修改默认配置,只需要在在实例化HtmlWebpackPlugin的对象时,传入一个配置对象即可,如:

    const htmlPlugin = new HtmlWebpackPlugin({
        template:path.join(__dirname,'./public/index.html'),
        filename: 'index.html'
    });
    module.exports = {
      ...
      plugins: [new HtmlWebpackPlugin()]
    };
    

    常见应用:在内存中生成index.html文件

    以上案例中,我们实现了生成物理的index.html文件,即在项目的dist目录下,是可以看见index.html的。有另外一种常见情况,即我们需要在内存中生成index.html文件,这时内存中的index.html中是在资源管理器中看不到的。我们何时会有这样的奇怪需求呢?

    试想这样的应用场景:

    我们的项目中需要实时预览效果,需要启动一个本地服务器,例如需要通过http://localhost:8080这样的方式访问index.html文件。显然我们对项目做的每一个更改,webpack都会重新打包,并反映到index.html文件中去。

    这听起来是完全可行的,问题在于:

    • webpack打包时读写磁盘去生成目标文件,由于物理磁盘读写速度非常有限,很可能导致预览滞后。

    因此我们可以生成一个内存中的index.html文件用于浏览器实时预览,由于内存读写速度明显快于物理磁盘,因此实时预览也更加及时。

    如何实现呢?

    • 我们只需要安装webpack-dev-server,并启动一个服务即可。这时HtmlWebpackPlugin将在内存中生成html文件,而不是在出口目录中
    • 使用 webpack-dev-server后,出口目录中的js文件同时会在内存中生成,并被内存中的index.html文件引入。

    限于篇幅,这里不再赘述webpack-dev-server的作用机制及配置方法。

  • 相关阅读:
    Android 自定义Adapter中实现startActivityForResult的分析
    上周热点回顾(11.30-12.6)团队
    .NET跨平台之旅:基于.NET Core改写EnyimMemcached,实现Linux上访问memcached缓存团队
    上周热点回顾(11.23-11.29)团队
    上周热点回顾(11.16-11.22)团队
    .NET跨平台之旅:在Linux上将ASP.NET 5运行日志写入文件团队
    .NET跨平台之旅:增加文件日志功能遇到的挫折团队
    .NET跨平台之旅:升级至ASP.NET 5 RC1,Linux上访问SQL Server数据库团队
    上周热点回顾(11.9-11.15)团队
    上周热点回顾(11.2-11.8)团队
  • 原文地址:https://www.cnblogs.com/twodog/p/12134763.html
Copyright © 2011-2022 走看看