如何使用Parcel或Webpack配合Google clasp管理工作流并打包单HTML文件

Webpack和Parcel均可实现将脚本、样式全部内嵌到单个HTML文件的需求，以下是可直接用于clasp工作流的配置方案： #

Webpack 配置方案 #

你之前仅配置LimitChunkCountPlugin只能输出单JS文件，是因为缺少HTML处理和资源内联相关插件，完整配置步骤如下：

1. 安装所需依赖

npm install --save-dev html-webpack-plugin html-inline-script-webpack-plugin html-inline-css-webpack-plugin css-loader style-loader

2. 修正后的webpack.config.js配置：

const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const HtmlInlineScriptPlugin = require('html-inline-script-webpack-plugin');
const HtmlInlineCSSPlugin = require('html-inline-css-webpack-plugin').default;

module.exports = {
  mode: 'development',
  entry: './src/index.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist'),
    clean: true
  },
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ['style-loader', 'css-loader']
      }
    ]
  },
  plugins: [
    new webpack.optimize.LimitChunkCountPlugin({
      maxChunks: 1
    }),
    new HtmlWebpackPlugin({
      template: './src/index.html', // 指向你的HTML模板文件
      filename: 'index.html'
    }),
    new HtmlInlineScriptPlugin(),
    new HtmlInlineCSSPlugin()
  ]
};

执行npm run build后，dist目录下只会生成单个index.html文件，所有脚本、样式均已内嵌到文件内。 #

Parcel 2 配置方案 #

旧版Parcel 1的内联插件停更后，Parcel 2原生支持资源内联能力，无需依赖停止维护的第三方插件，配置步骤如下：

1. 安装Parcel 2：

npm install --save-dev parcel

2. 修改你的HTML模板，给需要内联的资源标签添加inline属性：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="./style.css" inline>
</head>
<body>
  <!-- 你的页面内容 -->
  <script src="./index.js" inline></script>
</body>
</html>

3. 在package.json中添加打包命令：

{
  "scripts": {
    "build": "parcel build src/index.html --no-source-maps"
  }
}

执行npm run build后即可得到全资源内嵌的单个HTML文件。 #

两种方案最终输出的文件均符合Google Apps Script的加载要求，可直接放入clasp工作流的推送目录使用。

内容的提问来源于stack exchange，提问作者kztd