Webpack不生成index.html

╰半夏微凉° 2023-05-31 02:54 7阅读 0赞

没有导出你的最后2个插件，并且没有指定html文件名dist，因为HtmlWebpackPlugin应该生成相对于path，下面是固定配置：

var path = require('path')
        var webpack = require('webpack')
        var HtmlWebpackPlugin = require('html-webpack-plugin');
    
        module.exports = { 
            entry: './src/main.js',
            output: { 
                path: path.resolve(__dirname, './dist'),
                publicPath: '/dist/',
                filename: 'build.js'
            },
            module: { 
                rules: [{ 
                        test: /\.css$/,
                        use: [
                            'vue-style-loader',
                            'css-loader'
                        ],
                    }, { 
                        test: /\.vue$/,
                        loader: 'vue-loader',
                        options: { 
                            loaders: { }
                            // other vue-loader options go here
                        }
                    },
                    { 
                        test: /\.js$/,
                        loader: 'babel-loader',
                        exclude: /node_modules/
                    },
                    { 
                        test: /\.(png|jpg|gif|svg)$/,
                        loader: 'file-loader',
                        options: { 
                            name: '[name].[ext]?[hash]'
                        }
                    }
                ]
            },
            resolve: { 
                alias: { 
                    'vue$': 'vue/dist/vue.esm.js'
                },
                extensions: ['*', '.js', '.vue', '.json']
            },
            devServer: { 
                historyApiFallback: true,
                noInfo: true,
                overlay: true
            },
            performance: { 
                hints: false
            },
            devtool: '#eval-source-map',
            plugins: [
                new webpack.ProvidePlugin({ 
                    Vue: ['vue/dist/vue.esm.js', 'default'],
                    jQuery: 'jquery',
                    'window.jQuery': 'jquery',
                    $: 'jquery',
                    moment: 'moment',
                }),
                new HtmlWebpackPlugin({ 
                    hash: true,
                    filename: 'index.html'
                })
            ]
        }
    
        if (process.env.NODE_ENV === 'production') { 
            module.exports.devtool = '#source-map'
            // http://vue-loader.vuejs.org/en/workflow/production.html
            module.exports.plugins = (module.exports.plugins || []).concat([
                new webpack.DefinePlugin({ 
                    'process.env': { 
                        NODE_ENV: '"production"'
                    }
                }),
                new webpack.optimize.UglifyJsPlugin({ 
                    sourceMap: true,
                    compress: { 
                        warnings: false
                    }
                }),
                new webpack.LoaderOptionsPlugin({ 
                    minimize: true
                })
            ])
        }