vue-cli是如何在webpack-dev-server中应用HtmlWebpackPlugin的

Question

在研究vue-cli的时候发现其dev环境下是通过"webpack-dev-server --inline --progress --config build/webpack.dev.conf.js"来生成一个可以热重载的服务器的。
我自己写了一个类似的小demo，webpack.config.js：

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

module.exports = {
    entry: './src/entry.js',
    devtool: 'inline-source-map',
    output: {
        path: path.join(__dirname, 'dist'),
        filename: 'bundle.js',
        publicPath: '/'
    },
    devServer: {
        hot: true,
        compress: true,
        publicPath: './'
    },
    module: {
        loaders: [{
                test: /\.css$/,
                loader: "style-loader!css-loader"
            },
            {
                test: /\.less$/,
                loader: "style-loader!css-loader!less-loader"
            }
        ]
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin(), // 热加载
        new HtmlWebpackPlugin(),
    ]
}

然而运行webpack-dev-server的时候发现打开localhost:8080并没有页面内容，判断HtmlWebpackPlugin没有生效，网络上查询也没有找到解决方法，想问下大佬们有没有思路或者解决办法

Answer 1

已发现，没有页面内容是文件路径配置错误导致的，只需要修改devServer的publicPath为'/'就可以解决。

说明对于webpack的publicPath的设置并未理解，在官网中是这样介绍的：

此路径下的打包文件可在浏览器中访问。

假设服务器运行在 http://localhost:8080 并且 output.filename 被设置为 bundle.js。默认 publicPath 是 "/"，所以你的包(bundle)可以通过 http://localhost:8080/bundle.js 访问。

即在HTML中引用的文件的前置路径，如果设置错误会导致文件找不到，也就使HtmlWebpackPlugin没有生效