为什么webpack-dev-server中在iframe模式下不能自动更新视图

Question

之前没有尝试使用webpack-dev-server，只是用webpack进行打包。但是通过一些资料了解到，在webpack-dev-server模式下，是可以自动进行debug的。

下面是我的webpack.config.js

let path = require('path');

module.exports = {
    entry: ['./App/app.js'],
    output: {
        path: path.join(__dirname, '/dest'),
        publicPath: '/dist/',
        filename: 'app.js'
    },
    resolve: {
        extensions: ['.js', '.jsx', '.css']
    },
    module: {
        loaders: [
            {   test: /\.js|jsx$/,
                loaders: ['babel-loader'],
                exclude: /node_modules/
            },
            {
                test: /\.css$/,
                loaders:['css-loader']
            },
            {   test: /\.(eot|woff|woff2|svg|ttf)([\?]?.*)$/,
                loaders: ['file-loader']
            },
            {   test: /\.json$/,
                loader: 'json-loader'
            }
        ]
    },
    devServer: {
        publicPath: '/dist/',
        hot:true
    }
};

接着我键入$webpack-dev-server访问 http://localhost:8080/webpack-dev-server/index.html (iframe模式)，修改代码后，视图没有发生更新。即使重新键入webpack-dev-server视图也没有发生任何改变。

只能通过十分繁琐的方法改变视图，先键入$webpack等它打包好后再键入$webpack-dev-server这样才会发生视图的更新。

我想请问一下是哪里出现了问题。

Answer 1

发现问题的原因了，webpack-dev-server所产生的打包文件不会直接存在于实际的目录中，而是在内存中进行完成。其默认地址为根目录。

所以我将入口地址从<script src="dest/bundle.js"></script>
改为了
<script src="bundle.js"></script>
就可以解决问题了