Webpack输出资源内容到html文件

前端技术发表留言

需求来源

对于小的项目或者单文件的网页，我们将css文件和js文件可以直接内联插入到html中，可以实现单文件部署（使用场景：例如在一些可视化编辑器上直接粘贴生成的html代码就可以运行了）；当然比较大的项目我们可以注入一些公共的样式和js文件的到html中；

我们使用html-webpack-plugin的插件

https://github.com/DustinJackson/html-webpack-inline-source-plugin

使用方法

首先安装内联文件的插件：

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

修改webpack配置：

const HtmlWebpackInlineSourcePlugin = require('html-webpack-inline-source-plugin’);

// 注意插件的参数是加在HtmlWebpackPlugin上的，不是插件上的
module.export = {
    plugins: [
      new HtmlWebpackPlugin({
          // 这里我会注入所有的css和js到html中，也可以根据需求修改正则，只注入部分文件
          inlineSource: '.(js|css)$' 
      }),
      new HtmlWebpackInlineSourcePlugin()
    ] 
};

注意

  1. 这里如果要注入css内容，还是需要使用插件（mini-css-extract-plugin）先将css文件抽离才可以注入到html文件中的。
  2. 因为这个插件是基于html-webpack-plugin，所以，html-webpack-plugin是必须要使用的，否则会报错。

参考链接

‍

留下回复