javascript - Webpack 可以编译,但 webpack-dev-server 的配置不同

标签 javascript webpack vue.js

我开始学习 webpack 并尝试使用 webpack-dev-server 进行编译和浏览器重新加载。

我遇到一个问题,当我运行命令时:

webpack

我的文件编译得很好,但是当我使用命令时:

# I removed the "--hot" and "--inline" to try to isolate where the problem 
# was coming from.

webpack-dev-server --config webpack.config.js

终端中的命令输出看起来不错,但实际上没有编译:

Gif showing the difference

问题是,webpack-dev-server 确实成功地提供了 public 目录中的文件,因此该部分可以正常工作,只是没有编译 javascript 和 vue文件。

这是我的webpack.config.js

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

我一直在关注vue-loader start tutorial它描述了这个过程,我没有发现任何问题。

我知道我指定的内容目录与教程不同,但据我所知,这不会影响文件的编译。

我在这里缺少什么?

最佳答案

发生这种情况是因为 Webpack-dev-server 从内存而不是磁盘提供文件。 文档中的确切引用,https://webpack.github.io/docs/webpack-dev-server.html

This modified bundle is served from memory at the relative path specified in publicPath (see API). It will not be written to your configured output directory. Where a bundle already exists at the same url path the bundle in memory will take precedence (by default).

关于javascript - Webpack 可以编译,但 webpack-dev-server 的配置不同,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36013485/

相关文章:

javascript - 使用 ViewModel 构造函数 knockout 虚拟组合

javascript - 如何使 eslint 解析在 jsconfig 中映射的路径

javascript - Internet Explorer 7 中 css 中的链接和背景的奇怪问题

javascript - 动态搜索值并创建变量的脚本?

javascript - 如何让 svg 图标在 spring-boot :run 后出现

typescript - 如何让热模块重新加载以在 typescript monorepo 中工作

javascript - Vuejs 中列表对象中文本部分的样式

webpack - 如何在 Vue 2 中包含 css 文件

vue.js - 如何使用 Vue.js 滑动过渡两个 block ?

javascript - HTML 中的弹出消息框(如 gmail 或 okcupid)?