Webpack 教程
Webpack 教程
  1. 概念
    1. 前言
    2. Webpack 入口起点(entry points)
    3. Webpack 输出(output)
    4. Webpack Loader
    5. Webpack Plugin
    6. Webpack 配置(Configuration)
    7. Webpack 模块(Modules)
    8. Webpack 模块解析(Module Resolution)
    9. Webpack 模块联邦(Module Federation)
    10. Webpack 依赖图(dependency graph)
    11. Webpack target
    12. Webpack manifest
    13. Webpack 模块热替换(hot module replacement)
    14. 为什么选择 webpack
    15. 揭示 Webpack 内部原理
  2. 指南
    1. 前言
    2. Webpack 起步
    3. Webpack 管理资源
    4. Webpack 管理输出
    5. Webpack 开发环境
    6. Webpack 代码分离
    7. Webpack 缓存
    8. Webpack 创建 library
    9. Webpack 环境变量
    10. Webpack 构建性能
    11. Webpack 内容安全策略
    12. Webpack 开发 - Vagrant
    13. Webpack 依赖管理
    14. Webpack 安装
    15. Webpack 模块热替换
    16. Webpack Tree Shaking
    17. Webpack 生产环境
    18. Webpack 懒加载
    19. Webpack ECMAScript 模块
    20. Webpack Shimming 预置依赖
    21. Webpack TypeScript
    22. Webpack Web Workers
    23. Webpack 渐进式网络应用程序
    24. Webpack 公共路径
    25. Webpack 集成
    26. Webpack 资源模块
    27. Webpack entry 高级用法
    28. Webpack Package exports
  3. 配置
    1. 前言
    2. Webpack Configuration Languages
    3. Webpack Configuration Types
    4. Webpack 入口和上下文
    5. Webpack Mode(模式)
    6. Webpack Output(输出)
    7. Webpack Module(模块)
    8. Webpack Resolve(解析)
    9. Webpack Optimization(优化)
    10. Webpack Plugins(插件)
    11. Webpack DevServer
    12. Webpack Cache
    13. Webpack Devtool
    14. Webpack 构建目标(Targets)
    15. Webpack watch 和 watchOptions
    16. Webpack 外部扩展(Externals)
    17. Webpack Performance
    18. Webpack Node
    19. Webpack Stats 对象
    20. Webpack 实验特性(Experiments)
    21. Webpack 其它选项
  4. Loader
    1. 前言
    2. Webpack babel-loader
    3. Webpack coffee-loader
    4. Webpack css-loader
    5. Webpack exports-loader
    6. Webpack expose-loader
    7. Webpack html-loader
    8. Webpack imports-loader
    9. Webpack less-loader
    10. Webpack node-loader
    11. Webpack postcss-loader
    12. webpack remark-loader
    13. Webpack sass-loader
    14. Webpack source-map-loader
    15. Webpack style-loader
    16. Webpack stylus-loader
    17. Webpack thread-loader
    18. Webpack val-loader
  5. Plugin
    1. Webpack插件
    2. Community
      1. HtmlWebpackPlugin
    3. Webpack
      1. AutomaticPrefetchPlugin
      2. BannerPlugin
      3. CommonsChunkPlugin
      4. ContextExclusionPlugin
      5. ContextReplacementPlugin
      6. DefinePlugin
      7. DllPlugin
      8. EnvironmentPlugin
      9. EvalSourceMapDevToolPlugin
      10. HashedModuleIdsPlugin
      11. HotModuleReplacementPlugin
      12. IgnorePlugin
      13. Internal webpack plugins
      14. LimitChunkCountPlugin
      15. MinChunkSizePlugin
      16. ModuleConcatenationPlugin
      17. ModuleFederationPlugin
      18. NoEmitOnErrorsPlugin
      19. NormalModuleReplacementPlugin
      20. PrefetchPlugin
      21. ProfilingPlugin
      22. ProgressPlugin
      23. ProvidePlugin
      24. SourceMapDevToolPlugin
      25. SplitChunksPlugin
      26. WatchIgnorePlugin
  6. API
    1. Webpack：命令行接口（CLI）
    2. Webpack：Node 接口
    3. Webpack：Stats Data
    4. Webpack-dev-server API
    5. Webpack：Hot Module Replacement
    6. Webpack：Loader Interface
    7. Webpack：Logger 接口
    8. Webpack Modules
      1. Webpack：模块方法
      2. Webpack：模块变量
    9. Webpack Objects
      1. Webpack：Compilation Object
    10. Webpack Plugins
      1. Webpack：compiler 钩子
      2. Webpack：compilation 钩子
      3. Webpack：ContextModuleFactory Hooks
      4. Webpack：JavascriptParser Hooks
      5. Webpack：NormalModuleFactory Hooks
      6. Webpack：Plugin API
      7. Webpack：解析器（Resolvers）
  7. 迁移
    1. 前言
    2. Webpack：从 v4 升级到 v5
      1. 准备工作
      2. 清理配置
      3. 清理代码
      4. 后续工作
    3. Webpack：从 v3 升级到 v4
    4. Webpack：从 v1 升级到 v2 或 v3
阅读(773) 书签 赞(0) 我要纠错

HtmlWebpackPlugin

2023-05-22 10:01 更新

​HtmlWebpackPlugin​ 简化了 HTML 文件的创建，以便为你的 webpack 包提供服务。这对于那些文件名中包含哈希值，并且哈希值会随着每次编译而改变的 webpack 包特别有用。你可以让该插件为你生成一个 HTML 文件，使用 lodash 模板提供模板，或者使用你自己的 loader。

安装

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

基本用法

该插件将为你生成一个 HTML5 文件， 在 body 中使用 script 标签引入你所有 webpack 生成的 bundle。 只需添加该插件到你的 webpack 配置中，如下所示：

const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');

module.exports = {
  entry: 'index.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: 'index_bundle.js',
  },
  plugins: [new HtmlWebpackPlugin()],
};

这将会生成一个包含以下内容的 ​dist/index.html​ 文件：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>webpack App</title>
  </head>
  <body>
    <script src="index_bundle.js"></script>
  </body>
</html>

如果你有多个 webpack 入口，他们都会在已生成 HTML 文件中的 ​<script>​ 标签内引入。

如果在 webpack 的输出中有任何 CSS 资源（例如，使用 MiniCssExtractPlugin 提取的 CSS），那么这些资源也会在 HTML 文件 <head> 元素中的 <link> 标签内引入。

配置

获取所有的配置选项，请浏览插件文档。

第三方插件

该插件支持第三方插件。详细列表参阅文档。


以上内容是否对您有帮助：
← Webpack插件
AutomaticPrefetchPlugin →
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号