Webpack 4.0 开始，为了应对 Parcel 等的挑战，配置越来越简单，甚至可以“零配置”。

一个简单的 Webpack.config.js 配置文件 ：

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  }
};

添加上常用 loader 后的配置文件:

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

module.exports = {
  mode: 'development',
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, 'public'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      { test: /\.css$/, use: ['style-loader','css-loader'] },
      { test: /\.scss$/, loaders: ["style-loader", "css-loader", "sass-loader"]},
      { test: /\.(png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot)$/, use: ['file-loader'] },
      { test: /\.(html)$/, use: {loader: 'html-loader'}}
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      title:'Home', 
      filename: 'index.html', 
      template: 'src/index_template.html'
    })
  ],

  //引入绝对路径
  resolve: {
    alias: { '@': path.resolve(__dirname, 'src') }
  },

  devServer: {
    contentBase: "./public",//本地服务器所加载的页面所在的目录
    historyApiFallback: true,//不跳转
    inline: true//实时刷新
  }
};

一个多页面配置文件：

如果不指定output.filename，默认的filename是"main.js"，每个页面都会包含。If you have multiple webpack entry points, they will all be included with script tags in the generated HTML.

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

module.exports = {
  mode: 'development',
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'public'),
    // filename: 'bundle.js'
  },
  module: {
    rules: [
      { test: /\.css$/, use: ['style-loader','css-loader'] },
      { test: /\.scss$/, loaders: ["style-loader", "css-loader", "sass-loader"]},
      { test: /\.(png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot)$/, use: ['file-loader'] },
      { test: /\.(html)$/, use: {loader: 'html-loader'}}
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      title:'Home', 
      filename: 'index.html', 
      template: 'src/index_template.html',
    }),
    new HtmlWebpackPlugin({
      title:'Sub Page',
      filename: 'subpage.html', 
      template: 'src/pages/subpage.html',
    }),
    new HtmlWebpackPlugin({
      title:'404 页', 
      filename: '404.html',
      template: 'src/pages/404.html',
    }),
  ]
  ...
};

指定 chunk 文件：

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

module.exports = {
  mode: 'development',
  // entry: './src/index.js',
  entry: {
    index:'./src/index.js',
    subpage:'./src/pages/subpage.js',
    "404":'./src/pages/404.js'
  },
  output: {
    path: path.resolve(__dirname, 'public'),
    // filename: 'bundle.js'
    filename: 'js/[name]-[chunkhash].js',
  },
  module: {
    rules: [
      { test: /\.css$/, use: ['style-loader','css-loader'] },
      { test: /\.scss$/, loaders: ["style-loader", "css-loader", "sass-loader"]},
      { test: /\.(png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot)$/, use: ['file-loader'] },
      { test: /\.(html)$/, use: {loader: 'html-loader'}}
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      title:'Home', 
      filename: 'index.html', 
      template: 'src/index_template.html',
      chunks: ['index']
    }),
    new HtmlWebpackPlugin({
      title:'Sub Page',
      filename: 'subpage.html', 
      template: 'src/pages/subpage.html',
      chunks: ['subpage']
    }),
    new HtmlWebpackPlugin({
      title:'404 页', 
      filename: '404.html',
      template: 'src/pages/404.html',
      chunks: ['404']
    }),
  ],

  //引入绝对路径
  resolve: {
    alias: { '@': path.resolve(__dirname, 'src') }
  },

  devServer: {
    contentBase: "./public",//本地服务器所加载的页面所在的目录
    historyApiFallback: true,//不跳转
    inline: true//实时刷新
  }
};

参考：

https://github.com/jantimon/html-webpack-plugin