demo07 自动生成 Html 文件

时间 2019-12-05

标签 demo07 demo 自动生成 html 文件栏目 HTML 繁體版

原文原文链接

1.为何要自动生成html?

在以前的 demo 中，执行完 webpack 后要手动把生成的同步模块的 js 包 (或css包) 引入到html中，这样实际上是比较繁琐的。javascript

尤为是在真正的项目开发中，为了对静态资源或第三方包作长缓存，咱们会配置 webpack ，让其生成的每一个包的文件名都自动带上该包对应的 chunkhash 值。若是文件内容有改变的话，那么该文件对应的包的 chunkhash 也会改变，这样就致使对应的 html 引用的 url 地址也须要进行相应的修改。css

所以，咱们须要经过 webpack 插件来自动生成 html 以及自动引用相应的 js 包。html

html-webpack-plugin 插件就能帮你作到。java

2.html-webpack-plugin

html-webpack-plugin 能够根据你配置的 html 模板，自动生成一个 html 文件，而且引用相关的资源文件。webpack

new HtmlWebpackPlugin({
      title: '设置html的title',// 当设置了template选项后，title选项将失效
      filename: "index.html",
      template: "./index.html",
      minify: {
        // 压缩选项
        collapseWhitespace: true
      }
    }),
复制代码

title 设置生成的 html 文件的标题(当设置了template选项后，title选项将失效)git
filename 生成 html 的文件名github
template 指定一个模板文件来生成 html ，可选的模板有 html,jade , ejs 等等，使用自定义模板时，须要安装相对应的 loader 。web
inject 配置 <script> (即js包) 标签在 html 中的注入选项：true(默认) | body | head | falsenpm
- true <script> 标签放在 <body> 底部
- body 效果与 true 相同
- head <script> 标签放在 html 的 <head> 标签内
- false 不引用 webpack 生成的 js 文件
favicon 设置 html 文件的 favicon缓存
minify (默认false) 对 html 文件进行压缩
hash 在引用 js 或 css 文件的 url 中添加一个惟一的 hash 值，用于避免缓存命中
chunks 默认状况下，html 会引用 webpack 生成的全部同步模块的js文件（即便是多入口），经过此选型能够指定只引入哪些特定入口的文件
excludeChunks 与 chunks 选项相反

官方文档：github.com/jantimon/ht…

3.安装相关依赖

(注意：html-webpack-plugin 依赖于 webpack，所以须要在项目下安装 webpack)

npm install -D html-webpack-plugin
npm install -D webpack
npm install -D css-loader // 把 css 转化为 js 模块
npm install -D style-loader // 将 css 以 style 节点插入 html 中
复制代码

4.目录结构

// `--` 表明目录， `-` 表明文件
  --demo07
    --src
      -app.js
      -app2.js
      -style.css
    --index.html
    --webpack.config.js
复制代码

src/app.js

// const css = import('./style.css');
window.addEventListener("click", function () {
  const css = import('./style.css');
  console.log(css);
});
复制代码

src/style.js

body{
  background-color: red;
}
复制代码

5.编写webpack配置文件

webpack.config.js

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

module.exports = {
  entry: {
    app: "./src/app.js"
    // app2: "./src/app2.js"
  },
  output: {
    publicPath: __dirname + "/dist/", // 打包后资源文件的引用会基于此路径
    path: path.resolve(__dirname, "dist"), // 打包后的输出目录
    filename: "[name].bundle.js"
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        // css处理为style标签
        use: [
          "style-loader",
          'css-loader'
        ]
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: '设置html的title',// 当设置了template选项后，title选项将失效
      filename: "index.html",
      template: "./index.html",
      // chunks: ["app"], // entry中的app入口才会被打包
      minify: {
        // 压缩选项
        collapseWhitespace: true
      }
    }),
  ]
};
复制代码

6.执行打包命令

(默认你已经安装了全局 webpack 以及 webpack-cli )

webpack
复制代码

7.验证打包结果

在 dist 文件夹中包含 index.html , 并自动引用相应的 js 包。输出结果：

1.bundle.js
app.bundle.js
index.html
复制代码

8.源码地址

demo 代码地址: github.com/SimpleCodeC…

仓库代码地址(及目录): github.com/SimpleCodeC…