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


79

我正在尝试使用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永远不会对浏览器可用

在第二个项目符号上,我可以看到这一点,因为在浏览器窗口中不会替换vue占位符,而且如果我打开JavaScript控制台,则不会创建Vue实例,也不会使其在全局范围内可用。

发行的Gif

我想念什么?


我认为您尚未使Webpack正常工作,浏览器控制台中缺少bundle.js。之后,您应该对热模块更换文档有个清晰的了解。webpack.github.io/docs/…有所了解,建议您首先从CLI模式开始
mygoare

6
在构建文档时,我确实通读了文档,而且我个人觉得解释有些混乱。同样,当我逐步浏览示例时,他们给出了一个新项目,这是行不通的。也就是说,我进行了一些组件隔离测试,并弄清楚了配置的含义。我今天中午要输入一个详细的答案。
克里斯·施米茨

Answers:


64

这里有两点导致我的问题:

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'}
        ]
    }
};

8
“ publicPath”选项是开发服务器最容易混淆的部分。经验法则:如果未在“输出”块(webpack配置)中设置“ publicPath”,则不要在开发服务器中设置“ publicPath”选项
Alan

感谢您提及“ publicPath”选项。这真的帮助了我!
Benny Neugebauer

3
Webpack的人应该有您的薪水!到目前为止,这是迄今为止最好的有关如何设置服务器的文档。
Ernie S


medium.com/code-oil / ...这帮助我了解了为什么它不起作用。在我的情况下,我应该将publicPath设置为“ /”,而应该将其设置为“ / js-lib /”,这就是它从未选择文件更改的原因,因为我在js-lib中而不是内存中提供静态文件'http:localhost:9001'+'/'中的文件(您的webpack-dev-server主机+ publicPath)
Herz3h

19

经过长时间的搜索,我找到了解决问题的方法,在这种情况下,输出路径配置不正确。

此配置解决了我的问题:

const path = require('path');

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

8
添加publicPath属性为我修复了该问题
Borjante

13

正确的解决方案

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

默认情况下禁用。

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

例:

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

2
我已经尝试了几个小时,您的建议终于奏效了。亲爱的开发人员,实际上HMR为我的项目工作。但是我通过代理将webpack-dev-server与firebase-serv关联了。当我应用此建议时,我的问题已解决。那谢谢啦。
Arda Zaman

4

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


4

就我而言,删除“ --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]']
  },


1

在同一个webpack-dev-server端口上依次运行两个不同的应用程序之后,我也遇到了这种情况。即使另一个项目被关闭,这仍然发生。当我更改为未使用的端口时,它将直接开始工作。

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

如果您像我一样使用Chrome,则只需打开Developer Tools并单击即可Clear site data。您还可以通过以隐身模式运行网站来查看是否存在此问题。

在此处输入图片说明


这也发生在我身上,除了我也必须重新启动chrome。
安德烈·罗萨莱斯

Chrome重新启动也有所帮助
Vlad Isajkin

0

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

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

打开那是我的票。


0

我遇到了类似的情况,webpack-dev-server正在处理我的index.html文件但未更新。看了几篇文章后,我意识到webpack-dev-server它不会生成一个新的js文件,而是将一个文件注入index.html

我将添加html-webpack-plugin到了我的应用中,并在webpack.config.js文件中进行了以下配置:

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

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

然后,我注释掉引用我的入口js文件的脚本标签index.html。现在,我可以运行webpack-dev-server而无需任何其他标志,并且对文件的任何更改都将立即显示在浏览器中。


0

我将添加自己的Webpack故事 --watch悲惨到痛苦的墙壁上。

我之前在跑步

webpack --watch

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

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


By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.