manifest-loader.js

// A loader to transform a partial manifest.json file into a complete
// manifest.json file by adding entries from an NPM package.json.
// https://stackoverflow.com/questions/44232366/how-do-i-build-a-json-file-with-webpack

const fs = require('fs')

module.exports = function (source) {
  this.addDependency('./package.json')
  this.cacheable()
  const pkg = JSON.parse(fs.readFileSync('./package.json'))

  const merged = Object.assign({}, JSON.parse(source), {
    'name': pkg.name,
    'description': pkg.description,
    'version': pkg.version,
    'author': pkg.author,
    'homepage_url': pkg.homepage
  })

  let indentation = this.minimize ? null : 2
  return JSON.stringify(merged, null, indentation) + '\n'
}

webpack.config.js

module.exports = {
  // tell webpack where to loacate manifest-loader.js
  resolveLoader: {
    modules: [path.resolve(__dirname, 'src'), 'node_modules']
  },

  entry: {
    content: './src/content.js',
    popup: './src/popup.js'
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].bundle.js'
  },
  module: {
    rules: [{
      test: /\.js$/,
      use: {
        loader: 'babel-loader',
        options: { presets: ['env'] }
      }
    }, {
      test: /manifest\.json$/,
      use: [
        {
          loader: 'file-loader',
          options: { name: '[name].[ext]' }
        },
        'manifest-loader'
      ]
    }, {
      ... etc
    }]
  }
}
    

PLUS, you need to add import './manifest.json' to any of your javascript files, otherwise the manifest will be considered dead code.

This is a little silly but I haven't found a good workaround yet.