如何自动生成html文件夹,webpack4 系列教程(十三)：自动生成HTML文件

本节课的代码目录如下：

30.png

本节课用的 plugin 和 loader 的配置文件package.json如下：{  "devDependencies": {    "file-loader": "^1.1.11",    "html-loader": "^0.5.5",    "html-webpack-plugin": "^3.2.0",    "url-loader": "^1.0.1",    "webpack": "^4.16.1"

}

}

1. 为什么要自动生成 HTML？

看过这个系列教程的朋友，都知道在之前的例子中，每次执行webpack打包生成js文件后，都必须在index.html中手动插入打包好的文件的路径。

但在真实生产环境中，一次运行webpack后，完整的index.html应该是被自动生成的。例如静态资源、js 脚本都被自动插入了。

为了实现这个功能，需要借助HtmlWebpackPlugin根据指定的index.html模板生成对应的 html 文件，还需要配合html-loader处理 html 文件中的标签和属性。

2. 编写入口文件

编写src/vendor/sum.js文件，封装sum()函数作为示例，被其他文件引用(模块化编程)：export function sum(a, b) {  return a + b;

}

编写入口文件src/app.js，引入上面编写的sum()函数，并且运行它，以方便我们在控制台检查打包结果：import { sum } from "./vendor/sum";console.log("1 + 2 =", sum(1, 2));

3. 编写 HTML 文件

根目录下的index.html会被html-webpack-plugin作为最终生成的 html 文件的模板。打包后，相关引用关系和文件路径都会按照正确的配置被添加进去。html>

Document

  

4. 编写Webpack配置文件

老规矩，HtmlWebpackPlugin是在plugin这个选项中配置的。常用参数含义如下：filename：打包后的 html 文件名称

template：模板文件(例子源码中根目录下的 index.html)

chunks：和entry配置中相匹配，支持多页面、多入口

minify.collapseWhitespace：压缩选项

除此之外，因为我们在index.html中引用了src/assets/imgs/目录下的静态文件(图片类型)。需要用url-loader处理图片，然后再用html-loader声明。注意两者的处理顺序，url-loader先处理，然后才是html-loader处理。const path = require("path");const webpack = require("webpack");const HtmlWebpackPlugin = require("html-webpack-plugin");module.exports = {  entry: {    app: "./src/app.js"

},  output: {    publicPath: __dirname + "/dist/",    path: path.resolve(__dirname, "dist"),    filename: "[name]-[hash:5].bundle.js",    chunkFilename: "[name]-[hash:5].chunk.js"

},  module: {    rules: [

{        test: /\.html$/,        use: [

{            loader: "html-loader",            options: {              attrs: ["img:src"]

}

}

]

},

{        test: /\.(png|jpg|jpeg|gif)$/,        use: [

{            loader: "url-loader",            options: {              name: "[name]-[hash:5].min.[ext]",              limit: 10000, // size <= 20KB

publicPath: "static/",              outputPath: "static/"

}

}

]

}

]

},  plugins: [    new HtmlWebpackPlugin({      filename: "index.html",      template: "./index.html",      chunks: ["app"], // entry中的app入口才会被打包

minify: {        // 压缩选项

collapseWhitespace: true

}

})

]

};

5. 结果和测试

运行webpack进行打包，下面是打包结果：

image

可以在/dist/中查看自动生成的index.html文件，如下图所示，脚本和静态资源路径都被正确处理了：

image

直接在 Chrome 打开index.html，并且打开控制台：

image

图片成功被插入到页面，并且 js 的运行也没有错误，成功。

作者：godbmw

链接：https://www.jianshu.com/p/b89a978b7ce3