How to manage package for workflow with Google clasp using Parcel or Webpack

Question

For Google appsscript, you need a single client side html file that includes the client side script and style in 1 file.

Can webpack, or parcel do this?

I saw a 2 year old video where it was working in parcel version 1, with the parcel-inline, but the inline seems not maintained for the current versions (1 or 2).

Inliner here

On webpack, in the webpack.config.js, if I set LimitChunkCountPlugin, maxChunks to 1 I get 1 file, but it's javascript, not html.

This seems like a critical piece of the clasp work flow, s I'm hoping someone has a good configurations. In terms of webpack vs. parcel, I don't see a difference for this

const path = require('path');
const webpack = require('webpack');


mode: 'development';
module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist'),
  },
};

module.exports = {
  // ...
  plugins: [
    new webpack.optimize.LimitChunkCountPlugin({
      maxChunks: 1,
    }),
  ],
};

Answer 1

best idea so far: use parcel to deliver into staging folder write js script to:

• replace the link and script tags in the html file
• rename the script and css files
• move them all to the appsscript folder
• call clasp push on the appsscript folder

Its working for now