npm build在我的dist / index.htm文件中多次插入输出文件main.js

编程问答 2022-06-05

问题描述

每次我运行命令npm run build时，它都会在index.html中附加多个main.js文件。我尝试查看My code runs twice when compiled by webpack，并多次卸载了webpack-dev-server并删除了node_modules文件夹。而不是将main.js附加4次，而是附加了2次。

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


module.exports = {
  entry: './src/index.js',output: {
    filename: 'main.js',path: path.resolve(__dirname,'dist'),},devServer: {
    contentBase: "./build",module: {
    rules: [
      {
        test: /\.m?js$/,exclude: /(node_modules|bower_components)/,use: {
          loader: 'babel-loader',options: {
            presets: ['@babel/preset-env'],plugins: ['@babel/plugin-proposal-object-rest-spread']
          }
        }
      },{
        test: /\.css$/i,use: ['style-loader','css-loader'],}
    ]
  },plugins: [
    new HtmlWebpackPlugin({
      template: path.resolve('./dist/index.html'),inject: false,}),]
};
//package.json
{
  "name": "test","version": "1.0.0","description": "This is a JavaScript quiz!","private": true,"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1","build": "webpack"
  },"keywords": [],"author": "","license": "ISC","devDependencies": {
    "@babel/core": "^7.12.3","@babel/preset-env": "^7.12.1","babel-loader": "^8.1.0","css-loader": "^5.0.0","webpack-cli": "^4.1.0"
  },"dependencies": {
    "jquery": "^3.5.1","lodash": "^4.17.20","style-loader": "^2.0.0","webpack": "^5.3.2"
  },"main": "webpack.config.js"
<!--index. html-->
<!doctype html>
<html>
<head><Meta charset="utf-8"/>
<title>Getting Started</title>
<link rel="stylesheet" src="style.css"></head>
<body><h1>Quiz Game</h1><h3 id="game-points">Your score:</h3>
<script src="main.js"></script>
<script src="main.js"></script>

</body></html>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

webpackwebpackwebpackwebpack-dev-server