javascript - Webpack-dev-server 不会在更改时构建文件

标签 javascript webpack webpack-dev-server webpack-style-loader

所以我有以下 webpack 配置:

import path from 'path';

module.exports = {
    entry: {
    index: './dev/index.js'
    },
    output: {
        path: path.join(__dirname, 'dist'),
        publicPath: './dist/',
        filename: 'bundle.js',
        chunkFilename: '[id].bundle.js'
    },
    module:{
        loader:{
            test: /\.js$/,
            exclude:path.resolve(__dirname, "node_modules"),
            loader: 'js'
        }
    }

};

问题是,当我执行 webpack --watch 时,文件确实在每次更改时都构建在 /dist/ 文件夹中。然而,当我运行 webpack-dev-server 时,文件甚至没有构建。这是为什么?

请帮忙。

最佳答案

您没有看到文件发送到您的 dist 文件夹中的原因是因为 webpack-dev-server 使用内存中文件系统

当您的代码更改时,这允许极快的增量构建。这是我们有意设计的。您可以在浏览器中查看生成的代码,而无需引用这些文件。

为了构建性能,我们不推荐它,但您可以查看像 write-file-webpack-plugin 这样的插件。如果您需要此功能。

关于javascript - Webpack-dev-server 不会在更改时构建文件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39056782/

相关文章:

express - 我的 webpack-dev-middleware 设置无法获取/错误

node.js - 如何使用网络套接字和 Angular CLI 设置代理

javascript - 我可以自定义 WebPack 插入的 'script' 标签吗?

javascript - webpack 加载器始终在编译中包含 node_modules

reactjs - webpack options 有一个未知的属性 'hotOnly' 。无效的选项对象。已使用选项对象初始化开发服务器

javascript - 表单提交与使用 ajax 传递数据的按钮 - 一个有效,另一个无效

javascript - 在 Angular 10 中两次显示 ng-content

javascript - 根据日期和时间对 JSON 数据进行排序

javascript - Jquery 动态创建元素 | onclick 传递字符串参数

javascript - Webpack 打包 ReactDOM 导致 loader 错误