require.extensions is not supported by webpack. Use a loader instead

Question

I use express + webpack3 + ejs + typescript

when I build, the stdout output give me some warning:

WARNING in ./node_modules/ejs/lib/ejs.js
require.extensions is not supported by webpack. Use a loader instead.
 @ ./src/environment.ts 4:10-24
 @ ./src/server.ts

WARNING in ./node_modules/ejs/lib/ejs.js
require.extensions is not supported by webpack. Use a loader instead.
 @ ./src/environment.ts 4:10-24
 @ ./src/server.ts

WARNING in ./node_modules/express/lib/view.js
80:29-41 Critical dependency: the request of a dependency is an expression

here is part of webpack.config.ts:

import * as webpack from 'webpack';
import * as path from 'path';
import * as CopyWebpackPlugin from 'copy-webpack-plugin';

const config: webpack.Configuration = {
  target: 'node',
  devtool: 'source-map',
  entry: {
    server: path.resolve(__dirname, './src/server.ts')
  },
  output: {
    path: path.resolve(__dirname, 'build'),
    filename: 'server.js'
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        exclude: /node_modules/,
        loader: 'ts-loader'
      }
    ]
  },
  resolve: {
    extensions: ['.ts', '.tsx', '.js']
  },
  plugins: [
    new CopyWebpackPlugin([
      { from: './src/views', to: 'views' },
      { from: './src/public', to: 'public' }
    ])
  ]
};

export default config;

and part of tsconfig.json:

"include": [
    "src/server.ts",
    "src/typings"
  ],
  "exclude": [
    "node_modules",
    "src/public",
    "src/views"
  ]

Answer 1

The best solution for this is using webpack-node-externals to not worry about node_modules at all when working with webpack for backend.

When bundling with Webpack for the backend - you usually don't want to bundle its node_modules dependencies. This library creates an externals function that ignores node_modules when bundling in Webpack.

Answer 2

I had the same problem and I solved it by adding the following code to my webpack.config.js file:

resolve: {
   alias: {
       'express-handlebars': 'handlebars/dist/handlebars.js'
   }
}

Answer 3

This set up uses ejs and the ejs-specific solution is to set this in your webpack config:

resolve: {
   alias: {
     'ejs': 'ejs.min.js'
   }
}