An alternative approach to the solution provided by @user108471 is to utilize the copy-webpack-plugin. This plugin offers a transform feature that allows you to make modifications to the manifest.json on the go before transferring it to its destination.

There are two main benefits to this method:

• It eliminates the need for creating an extra unnecessary manifest.js bundle (@bronson's solution addresses this as well)
• You won't have to use require in another .js file to access the manifest.json (which might seem counterintuitive)

A basic setup could look something like this:

webpack.config.js

// Using 'require' for .json files simplifies things
let package = require('./package.json');

function modify(buffer) {
   // Copy-webpack-plugin provides a buffer
   var manifest = JSON.parse(buffer.toString());

   // Make desired changes, such as
   manifest.version = package.version;

   // Convert back to prettified JSON with two spaces
   modifiedManifest = JSON.stringify(manifest, null, 2);
   return modifiedManifest;
}


module.exports = {

   // ...

   plugins: [
      new CopyWebpackPlugin([
         {
            from: "./src/manifest.json",
            to:   "./dist/manifest.json",
            transform (content, path) {
                return modify(content)
            }
         }])
   ]

}

In my approach utilizing Webpack 4, I have created a versatile solution for generating JSON files by leveraging Webpack loaders, which can also be effectively used for manifest.json files.

Custom Webpack Configuration (webpack.config.js)

const ExtractTextPlugin = require("extract-text-webpack-plugin");
const resolve = require("path").resolve;

module.exports = {
    entry: {
        entry: resolve(__dirname, "app/main.js"),
    },
    module: {
        rules: [
            {
                test: /manifest\.js$/,
                use: ExtractTextPlugin.extract({
                    use: []  // This array intentionally left empty.
                })
            },
            {
                test: /\.png$/,
                use: [{
                    loader: "file-loader",
                    options: {
                        context: resolve(__dirname, "app"),
                        name: "[path][name].[ext]",
                        publicPath: "/",
                    }
                }]
            }
        ],
    },
    output: {
        filename: "[name].js",
        path: resolve(__dirname, 'dist'),
    },
    plugins: [
        new webpack.EnvironmentPlugin(["npm_package_version"]), 
        new ExtractTextPlugin("manifest.json"),
    ]
};

Main Application File (app/main.js)

const manifest = require('./manifest.js');

// Additional sections of the application…

Manifest Data File (app/manifest.js)

const icon = require('./icon.png');  

const manifestData = {  
    icon: {"128": icon},  
    version: process.env.npm_package_version,  
    // other manifest details …
};

// The content you provide here will be emitted as manifest.json:
module.exports = JSON.stringify(manifestData, null, 2);

Dependencies in package.json

{
    "extract-text-webpack-plugin": "4.0.0-beta.0",
    "file-loader": "1.1.11",
    "webpack": "4.12.0",
}

let appConfig = {
  entry: './src/chrome_extension/index.js',
  output: {
    path: path.resolve(__dirname, 'build'),
    filename: 'UPDATED.js',
  },
  plugins: [
    new CleanWebpackPlugin(),
    new CopyWebpackPlugin({
      patterns: [
        {from: 'LICENSE.txt'},
        {from: 'assets/img/logo.png', to: `${ASSETS_DIR}/logo.png`},
        {from: 'src/chrome_extension/manifest.json',
          transform: function(manifestBuffer, path) {
            const updatedManifest = manifestBuffer.toString()
                .replace(/\$\{PAGE_PATH\}/g, PAGE_PATH)
                .replace(/\$\{SCRIPT_PATH\}/g, SCRIPT_PATH)
                .replace(/\$\{IMG_PATH\}/g, IMG_PATH);
            return Buffer.from(updatedManifest);
          },
        },
      ],
    }),
    new RemoveFilesWebpackPlugin({
      after: {
        log: false,
        include: [
          'dist/UPDATED.js',
        ],
      },
    }),
  ],
  stats: 'minimal',
  mode: 'development',
};

After utilizing your script frequently, I decided to make some modifications and release a slightly altered version on NPM: https://github.com/bronson/manifest-package-loader

Hoping that the installation process will be as simple as running

yarn add -D manifest-package-loader

and updating your webpack.config.js file.

Interestingly, earlier today I stumbled upon chem-loader, which could potentially serve the same purpose: https://github.com/mrmisterman/chem-loader

If you're working with webpack 4, the process is pretty straightforward. No need to specify any json loaders explicitly.

Just a heads up: I'm bundling everything into a single HTML file here, showing that there's no json loader in the webpack.config.js file.

Here's a snippet from webpack.config.js:

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

module.exports = {
 module: {
rules: [
  {
    test: /\.js$/,
    exclude: [/node_modules/],
    use: [{
      loader: 'babel-loader'
    }],
  },
  {
    test: /\.css$/,
    use: ["style-loader", "css-loader"]
  },
  {
      test: /\.ico$/,
      use: ["file-loader"]
  },
  {
    test: /\.html$/,
    use: [
      {
        loader: "html-loader",
        options: { minimize: true }
      }
    ]
  }
],
},
 plugins: [
new HtmlWebPackPlugin({
  template: "./src/index.html",
  filename: "./index.html",
  inlineSource: '.(js|css)$'
}),
new HtmlWebpackInlineSourcePlugin(),
],
devServer: {
  compress: true,
  disableHostCheck: true,
  }
}

In my app.js file, all I do is import data from './data/data.json'

import data from './data/data.json'