Webpack-dev-server编译文件，但不刷新或使编译的javascript对浏览器可用

JavaScript

宝儿小哥小卤蛋

2020-03-10

我正在尝试使用webpack-dev-server来编译文件并启动dev Web服务器。

在我package.json中，脚本属性设置为：

"scripts": {
  "dev": "webpack-dev-server --hot --inline",
 }

因此--hot和--inline应该启用Web服务器和热重载（据我所知）。

在我的webpack.config.js文件中，设置入口，输出和devServer设置，并添加加载程序以查找.vue文件中的更改：

module.exports = {
    entry: './src/index.js',
    output: {
        path: __dirname + '/public',
        publicPath: '/public',
        filename: 'bundle.js'
    },
    devtool: 'source-map',
    devServer:{
        contentBase: __dirname + '/public'
    },
    module:{
        loaders:[
            { test: /\.vue$/, loader: 'vue'}
        ]
    }
};

因此，使用此设置，我运行npm run dev。webpack-dev-server启动，模块加载程序测试成功（即，当我保存任何.vue文件时，它将导致webpack重新编译），但是：

  • 浏览器永不刷新
  • 存储在内存中的已编译javascript永远不会对浏览器可用

On that second bullet, I can see this because in the browser window the vue placeholders are never replaced and if I open up the javascript console the Vue instance is never created or made available globally.

发行的Gif

What am I missing?

第497篇《Webpack-dev-server编译文件，但不刷新或使编译的javascript对浏览器可用》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共6个回答
泡芙Green 2020.03.10

您的项目树尚不清楚，但是问题可能出在contentBase设置中。尝试设置contentBase：__dirname

十三西门小小 2020.03.10

我将在这里把我自己关于Webpack的特殊故事加到--watch痛苦的墙上。

我之前在跑步 

webpack --watch

为了构建一个Typescript项目。编译的.js文件将更新，但浏览器看到的捆绑包不会更新。所以我基本上和OP处于同一位置。

我的问题归结为watchOptions.ignored参数。构建配置的原始作者已设置ignored为过滤器功能，结果证明该参数不是有效值。用适当的替换过滤器功能RegExp使--watch构建再次为我工作。

Stafan飞云Sam 2020.03.10

我的情况是我对Webpack功能进行了非常深入的试验，但完全忘记了我一直将注入设置为虚假，就像这样……

 new HTMLWebpackPlugin({
        inject: false,
        ...
 }),

打开那是我的票。

前端神无 2020.03.10

正确的解决方案

告诉dev-server给观看由所服务的文件devServer.watchContentBase选项。

默认情况下禁用。

启用后，文件更改将触发整个页面重新加载。

例：

module.exports = {
  //...
  devServer: {
    // ...
    watchContentBase: true
  }
};
阿飞乐 2020.03.10

由于ExtractTextPlugin可能会发生这种情况。在开发模式下停用ExtractTextPlugin。仅将其用于生产构建。

达蒙十三 2020.03.10

我遇到了同样的问题，我发现除了所有这些要点之外，我们还必须将index.html和输出bundle.js放在同一文件夹中，并将contentBase设置为该文件夹（根目录或子文件夹） 。

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android