关于前端:webpack打包html资源

30次阅读

共计 586 个字符，预计需要花费 2 分钟才能阅读完成。

webpack 本身只能了解.js 以及.json 类文件，因而要打包 html 文件则须要插件来实现

plugins: html-webpack-plugin
应用步骤：
1、下载

npm install html-webpack-plugin -D    (- D 是 --save-dev 的缩写)

2、在 webpack.config.js 中引入
引入插件：const HtmlWebpackPlugin = require(‘html-webpack-plugin’);

3、应用 – 在 webpack.config.js 中如下配置

plugins: [
      // 默认会在打包好的文件夹中生成一个空 html 文件，主动引入打包好的资源文件（js/css），文件名默认叫 index.html
   new HtmlWebpackPlugin()]

打包后

4、自定义打包规定

plugins: [
    // 自定义 options, 指定须要打包的 html 文件，曾经打包后的命名等
    new HtmlWebpackPlugin(options:{
        template: './src/index.html',// 须要打包的 html 文件门路
        filename: 'demo.html',    // 打包后的文件名
        minify: true              // 是否压缩文件，true 为压缩
    })
]

打包后

打包好的 html 曾经主动引入打包好的资源文件

打包多个 HTML 文件，chunk 中引入的 js 有先后顺序

打包后的文件夹

正文完