I'm using webpack 4 here. I did the following to fix the problem, unfortunately no luck.

1. Attempted to remove the node_modules, package-lock.json. npm i. npm run build - Didn't work
2. Migrate to webpack 5 - Didn't work

package.json

 "webpack": "NODE_ENV=production webpack --config ./webpack.config.js"
 "build": "npm run clean && npm run webpack && npm run babel"
 "babel": "NODE_ENV=production babel src --out-dir dist --copy-files",

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

module.exports = {
  entry: {
    super: './src/super/index.js',
    index: ['core-js', './src/frontend/index.js'],
  },
  output: {
    path: path.join(__dirname, './dist/frontend/'),
    filename: '[name].[hash].bundle.js',
    publicPath: '/',
  },
  
   plugins: [
   new HtmlWebpackPlugin({
    template: path.join(__dirname, './public/index.html'),
    filename: 'index.html',
    chunks: ['index', 'vendor'],
  }),
   new webpack.HotModuleReplacementPlugin(),
   new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
  ],
  devtool: 'cheap-module-source-map',
  devServer: {
         hot: true,
         allowedHosts: ['.xxx.dev', '.xxx.dev1'],
         compress: true,
         contentBase: './',
         proxy: [{
           context: ['/api', '/public'],
           target: `http://localhost:${PORT || 3000}`,
         }],
      },
  resolve: {
    extensions: ['.js', '.jsx'],
    alias: {
     'react-dom': '@hot-loader/react-dom',
   },
  },
 }

Any help would be great. Thanks :)

CodePudding user response：

You need to use a plugin to do that. By default, webpack looks at src/index.js to build its dependency graph and generate the required js file. But for setting up an index.html that would automatically point to the newly generated .js, you would need to use a plugin - html-webpack-plugin (link to plugin)

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

module.exports = {
  module: {
    // ...
  },
  plugins: [new HtmlWebpackPlugin({ template: './src/index.html' })],
};

CodePudding user response：

You have not provided template file. Create template index.html in public folder, with root division.

And pass template to html-webpack-plugin.

    new HtmlWebpackPlugin({
        filename: './public/index.html'
    })

EDIT

Also path and port are not defined. Make sure you have imported path and defined port. Also check syntax for IgnorePlugin. It expect object with properties resourceRegExp, contextRegExp but value you provided doesent make sense.

new webpack.IgnorePlugin({resourceRegExp: /^\.\/locale$/, contextRegExp: /moment$/});

ContentBase is not supported, try static in devServer