用于多页和Sass的Webpack设置

Question

我无法为多页小组项目设置Webpack。
我想进行设置，以使3个html文件中的每个文件都具有链接到它们的自己的js文件，我还希望在所有页面上都可以访问sass样式。

当我运行 npm run dev 时，会为每个html生成一个bundle.js文件，这很好，但是在html文件中会注入 script 标记再说一次，我假设它与-watch 模式有关？

如果有人可以查看我的设置并提供有关优化的反馈，我通常会非常感激，谢谢！

package.json

 {
  "name": "",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack --mode development --watch",
    "build": "webpack --mode production"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/"
  },
  "keywords": [
    "api"
  ],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.4",
    "babel-preset-es2015": "^6.24.1",
    "css-loader": "^2.1.0",
    "html-webpack-plugin": "^3.2.0",
    "mini-css-extract-plugin": "^0.5.0",
    "node-sass": "^4.11.0",
    "sass-loader": "^7.1.0",
    "style-loader": "^0.23.1",
    "webpack": "^4.29.6",
    "webpack-cli": "^3.2.3"
  },
  "dependencies": {
    "jquery": "^3.3.1"
  }
}

webpack.config.js

const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const path = './resources/'
const output_path = __dirname + '/public'
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const inProduction = process.env.NODE_ENV === 'production'

module.exports = {
  mode: 'development',
  entry:
  {
    main: path + './src/main.js',
    about: path + './src/about.js',
    contact: path + 'src/contact.js',
    sass: path + 'scss/main.scss'
  }
  ,
  output: {
    path: output_path,
    filename: '[name].bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.scss$/,
        exclude: /node_modules/,
        use: [
          {
            loader: 'style-loader'
          },
          {
            loader: 'css-loader',
            options: {
              sourceMap: inProduction ? false : true,
              minimize: inProduction ? true : false
            }
          },
          {
            loader: 'sass-loader',
            options: {
              sourceMap: inProduction ? false : true
            }
          }
        ]
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'
        }
      }
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].css',
      chunkFilename: '[id].css'
    }),
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery'
    }),
    new HtmlWebpackPlugin({
      template: './public/main.html',
      chunks: ['main'],
      filename: 'main.html'
    }),
    new HtmlWebpackPlugin({
      template: './public/about.html',
      chunks: ['about'],
      filename: 'about.html'
    }),
    new HtmlWebpackPlugin({
      template: './public/contact.html',
      chunks: ['contact'],
      filename: 'contact.html'
    })
  ]
}