1

I'm developing a Chrome Extension and I use Webpack to bundle it. I've got my compiled bundle, which is the main part of the app, but I also need an options page to describe the functionality. This options page has nothing to do with the bundle, it's just a static HTML file.

I must put a lot of things in that options page so I want to render that page with Mustache and define all content with JavaScript. For the most part, I've done that.

Here's my Webpack config (I've removed the parts regarding my app):

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  output: {
    path: path.join(__dirname, 'extension/build/')
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/options/index.html',
      inject: false
    })
  ],
  module: {
    rules: [
      {
        test: /\.html$/,
        loader: 'mustache-loader',
        options: {
          render: require('./src/options/index.js')
        }
      }
    ]
  }
}

and in my src/index.js, I have:

require('./options/index.html')

This will open the template and render it with the data in src/options/index.js.

There's a problem with that, however. I run Webpack with webpack --watch and changes to index.js (it holds the template data) do not trigger a rebuild. Also, I would need to go through a lot of trouble to create another static HTML file in the same manner.

It would be ideal if HtmlWebpackPlugin automatically used the template I require() in my entry point so that I don't need to explicitly set it. Also, it would be great if it automatically used a js in that same location to get the data. For example:

require('./options/index.html`)

Renders the template with data from ./options/index.html.js and then emits it. It would be even better if it emitted it to a custom folder specified in the Webpack config.

Is that possible? I couldn't find a plugin/loader that does that.

Edit: I was able to partly fix the rebuild problem by specifying the render option as a function:

{
  test: /\.html$/,
  loader: 'mustache-loader',
  options: {
    render () {
      var file = './src/options/index.js'
      delete require.cache[require.resolve(file)]
      return require(file)
    }
  }
}

But it still doesn't work properly. The rebuild would only trigger after I make changes to index.html. This means that if I change index.js, I need to go and save index.html as well to trigger the build.

dodov
  • 5,206
  • 3
  • 34
  • 65
  • Do any of these suggestions help with the `--watch` problem? https://stackoverflow.com/questions/26708205/webpack-watch-isnt-compiling-changed-files – Atav32 Apr 08 '19 at 18:24
  • I'm a little surprised there's no `entry` field in the config. Does adding one fix the `--watch` bug? – Atav32 Apr 08 '19 at 18:27
  • Since Webpack 4, the default entry point is `src/index.js`, which is my case, so I don't need to specify it. Also the watch bug is not a bug. `index.js` with the data is simply not part of the dependency tree, so it's rightfully not watched. I'm looking for a plugin that makes it a part of that tree so it works as expected. – dodov Apr 09 '19 at 08:07
  • Can you put a minimal reproduceable example on GitHub for better analysis of your issue? – ViRuSTriNiTy Sep 01 '20 at 22:32

0 Answers0