webpack打包JS文件后，页面会引用两个js，导致重复输出函数，css样式也重复了。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app1">
        11
    </div>
    <li>
        <ul>1</ul>
        <ul>2</ul>
        <ul>3</ul>
        <ul>4</ul>
        <ul>5</ul>
    </li>
    <script src="./js/index.js" ></script>
</body>
</html>

这是index.html

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

module.exports = {
    mode:"development",
    entry:{
        index:path.resolve(__dirname,'./src/js/index.js')
    },
    output:{
        path:path.resolve(__dirname + './dist'),
        filename: 'js/[name].js'
    },
    module:{
        rules:[
            {
                test:/\.js$/,
                exclude:path.resolve(__dirname,'node_modules'),
                use:{
                    loader:"babel-loader",
                    options:{
                        presets:['@babel/preset-env']
                    }
                }
            },
            {
                test:/\.css$/i,
                use:["style-loader", 
                    {
                        loader:"css-loader",
                        options:{
                            modules:true,
                        }
                    }
                ]
            }
        ],
    },
    plugins:[
        new HtmlWebpackPlugin({
            filename:"index.html",
            template:path.resolve(__dirname,'./src/index.html'),
            chunks:['index'],
            exclude:['node_modules']
        })
    ],
    devServer:{
        open:true,
        host:'localhost',
        port:8080
    }
}

这是webpack.config.js

import moduleA from './moduleA';
import moduleB from './moduleB';
import moduleC from './moduleC';

import './../css/css1.css'
import './../css/css2.css'


console.log(moduleA.a);
console.log(moduleB.b);
console.log(moduleC.c);

这是index.js

项目打包后变成这样了

网页源文件这里不需要引入js文件了 ,webpack打包时候已经指定过入口和出口，会自动帮你注入

您好，我是有问必答小助手，你的问题已经有小伙伴为您解答了问题，您看下是否解决了您的问题，可以追评进行沟通哦~

如果有您比较满意的答案 / 帮您提供解决思路的答案，可以点击【采纳】按钮，给回答的小伙伴一些鼓励哦～～

ps:问答VIP仅需29元，即可享受5次/月有问必答服务，了解详情>>> https://vip.csdn.net/askvip?utm_source=1146287632