Webpack5实战笔记----15.webpack-server未能显示html问题

安装：

npm install --save-dev webpack-dev-server

 webpack.config.js

const path = require('path'); // 导入 node.js 中专门操作路径的模块
const HtmlWebpackPlugin = require('html-webpack-plugin'); //自动生成html
module.exports = {
    mode: 'development', // mode 用来指定构建模式
    entry: path.join(__dirname, './src/index.js'), // 打包入口文件的路径
    devtool: 'inline-source-map',
    plugins: [
        //webpack-server必须要配置这个才能运行后直接显示出html页面。
        new HtmlWebpackPlugin({
            title: 'Output Management',
            template: './src/index.html', //指定要用到的模板文件,这个可以js生成或者找个存在的
            filename: 'index.html' //生成在目录中
        })
    ],
    output: {
        path: path.join(__dirname, './dist'), // 输出文件的存放路径
        filename: 'bundle.js', // 输出文件的名称

    },
    module: {
        rules: [{
            test: /\.css$/,
            use: [
                'style-loader',
                'css-loader'
            ]
        }, ]
    }
}

总结：必须配置html-webpack-plugin才可以。

 源码：webpack-server-HTML: 解决webpack未能显示html的问题