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

我正在尝试使用WebpackDevServer编译文件并启动一个DevWeb服务器

在我的

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服务器启动，模块加载程序测试工作（即，当我保存任何.vue文件时，它会导致webpack重新编译），但是：

• 浏览器从不刷新
• 存储在内存中的已编译javascript永远不会提供给浏览器

在第二个项目符号中，我可以看到这一点，因为在浏览器窗口中，vue占位符永远不会被替换，如果我打开javascript控制台，vue实例永远不会被创建或全局可用

---

我遗漏了什么？

两件事导致了我的问题：

module.exports = {
    entry: './src/index.js',
    output: {

        // For some reason, the `__dirname` was not evaluating and `/public` was
        // trying to write files to a `public` folder at the root of my HD.
        path: __dirname + '/public', 

        // Public path refers to the location from the _browser's_ perspective, so 
        // `/public' would be referring to `mydomain.com/public/` instead of just
        // `mydomain.com`.
        publicPath: '/public',
        filename: 'bundle.js'
    },
    devtool: 'source-map',
    devServer:{

        // `contentBase` specifies what folder to server relative to the 
        // current directory. This technically isn't false since it's an absolute
        // path, but the use of `__dirname` isn't necessary. 
        contentBase: __dirname + '/public'
    },
    module:{
        loaders:[
            { test: /\.vue$/, loader: 'vue'}
        ]
    }
};

下面是固定的

webpack.config.js

：

var path = require('path');

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

---

我也遇到了同样的问题，我发现除了所有这些问题之外，我们还必须将index.html和output bundle.js放在同一个文件夹中，并将contentBase设置为这个文件夹，根文件夹或子文件夹。

经过长时间的搜索，我找到了问题的解决方案，在我的例子中，输出路径配置不正确

此配置解决了我的问题：

const path = require('path');

module.exports = {
  "entry": ['./app/index.js'],
  "output": {
    path: path.join(__dirname, 'build'),
    publicPath: "/build/",
    "filename": "bundle.js"
  }....

---

这可能是因为ExtractTextPlugin。在开发模式下取消激活ExtractTextPlugin。仅用于生产构建。

在同一

网页开发服务器

端口上相继运行两个不同的应用程序后，我也遇到了这种情况。即使另一个项目被关闭，这种情况还是发生了。当我切换到一个未使用的端口时，它直接开始工作

devServer: {
    proxy: {
        '*': {
            target: 'http://localhost:1234'
        }
    },
    port: 8080,
    host: '0.0.0.0',
    hot: true,
    historyApiFallback: true,
},

如果你像我一样使用Chrome，只需打开

开发者工具

，然后点击

清除站点数据

。您还可以通过以匿名模式运行站点来查看这是否是问题所在

---

在我的情况下，删除“-hot”会使它起作用。因此，我删除了

hot:true

webpack.dev.js

module.exports = merge(common, {
  mode: 'development',
  devtool: 'inline-source-map',
  devServer: {
    publicPath: '/js/',
    contentBase: path.resolve(__dirname, 'docs'),
    watchContentBase: true,
  }
});

webpack.common.js

  output: {
    path: path.resolve(__dirname, 'docs/js'),
    filename: '[name].min.js',
    library: ['[name]']
  },

---

我的情况是，我对网页包的功能进行了深入的实验，但完全忘记了我一直将inject设置为false，就像这样

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

---

打开它是我的问题。

正确的解决方案

告诉

dev server

查看该选项提供的文件

默认情况下，它处于禁用状态

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

例如：

module.exports = {
  //...
  devServer: {
    // ...
    watchContentBase: true
  }
};

---

我经历过类似的情况，

webpack dev server

为我的

index.html

文件提供服务，但没有更新。读了几篇文章后，我意识到

webpack dev server

不会生成新的js文件，而是将一个js文件注入

index.html

我在我的应用程序中添加了

html网页包插件

，并在

webpack.config.js

文件中使用以下配置：

const HtmlWebpackPlugin = require('html-webpack-plugin')

plugins: [
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'index.html',
      inject: true
    })
  ]

---

然后，我在

index.html

中注释掉了引用我的条目js文件的脚本标记。我现在可以运行

webpack dev server

，而无需任何附加标志，对我的文件所做的任何更改都将立即显示在浏览器中。

我将添加我自己关于webpack的特别故事

——观看这里的痛苦之墙

我在跑步

webpack --watch

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

我的问题归结为
watchOptions.ignored
参数。构建配置的原始作者已将
忽略
设置为筛选函数，结果证明该函数不是该参数的有效值。用适当的
RegExp
替换筛选函数，使
--watch
构建再次为我工作。
您的项目树不清楚，但问题可能出在contentBase设置中。尝试设置contentBase:uu dirname
我的devserver也有问题，无法正常工作。以前它是有效的，然后我添加了一吨额外的得到生产建设。然后当我回到devserver时，它不再工作了

进行了大量的调查——最终从git中的一次提交开始，然后一个接一个地重新引入更改，直到我找到答案

原来这是我对
package.json
所做的更改，具体如下：

  "browserslist": "> 1%, not dead",

这对于指导
postss
，了解目标浏览器非常有用

但是，它会停止devserver的工作。解决方法是将其添加到dev webpack配置中：

target: 'web', 

我在这里找到了解决方案：

希望这能为别人省去几个小时的麻烦
 我认为您的网页包工作不正常，浏览器控制台中缺少bundle.js。之后，您应该清楚地了解热模块更换文档，建议您首先从CLI模式开始。我在构建文档的过程中阅读了文档，我个人觉得解释有点复杂。另外，当我在一个新项目中通过他们给出的示例时，它也不起作用。也就是说，我做了一些组件隔离测试，并找出了配置的原因。今天午餐时，我将键入一个详细的答案，“publicPath”选项是dev服务器最容易混淆的部分。经验法则：如果您没有在“输出”块（webpack config）中设置“publicPath”，请不要在中为您的开发服务器设置“publicPath”选项谢谢您提到了“publicPath”选项。这是