Question

我的项目包含两个不同的项目：

使用Webpack的SPA项目
在后端项目中加载SPA

我托管了webpack-dev-server在http://localhost:2902上提供服务，后端服务器在http://localhost/my-proj.Whenever上，我运行webpack-dev-server捆绑并查看我的更改，它可以正确编译更改，但可以无法刷新网络，我必须手动进行。

例如：

http://localhost/my-proj

<html>
  <head></head>
  <body>
    <div id="app"></div>
    <script type="text/javascript" src="http://localhost:2902/bundle.js"></script>
  </body>
</html>

我的webpack开发配置文件：

module.exports = {
    mode: 'development',
    devtool: 'cheap-module-eval-source-map',
    entry: [
        './App/app.js'
    ],
    output: {
        path: path.resolve(__dirname + '/dist'),
        filename: 'bundle.js',
        publicPath: '/'
    },
    watch:true,
    devServer: {
        inline: true,
        contentBase: false,
        compress: true,
        host: HOST || config.dev.host,
        port: PORT || config.dev.port,
        overlay:true,
        watchOptions: {
            aggregateTimeout: 300,
            poll: true,
        },
        headers: {
            "Access-Control-Allow-Origin": "*",
            "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, PATCH, OPTIONS",
            "Access-Control-Allow-Headers": "X-Requested-With, content-type, Authorization"
        }
    },

    module: {
        rules: [...]
    },

    plugins: [
        new MiniCssExtratPlugin({
            filename: '[name].css',
            chunkFilename: '[id].css'
        }),
        new VueLoaderPlugin(),
    ]
};

我阅读了很多有关我的问题的问题和文章，但是我无法弄清楚我的配置出了什么问题。

Webpack 4.30.0 Webpack开发服务器 3.3.1

Webpack开发服务器捆绑并编译，但不会刷新浏览器

0 个答案: