webpack 配置 webpack-dev-server 不会即时编译文件答案

【问题标题】：webpack configuration webpack-dev-server does not compile files on the flywebpack 配置 webpack-dev-server 不会即时编译文件
【发布时间】：2016-11-11 18:49:23
【问题描述】：

我有以下 webpack 配置文件。

const path = require('path');
const webpack = require('webpack');

module.exports = {
output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'scripts.min.js'
},

resolve: {
    root: [
        path.resolve('./src'),
        path.resolve('./node_modules')
    ]
},

entry: './src/app.js',

module: {
    loaders: [
        {
            test: /\.js$/,
            loader: 'babel'
        }
    ]
},

devServer: {
    // compress: true,
    inline: true,
    stats: 'errors-only'
},

plugins: [
    new webpack.optimize.DedupePlugin(),
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.optimize.UglifyJsPlugin({ 'mangle': false, sourcemap: false })
]

};

问题是，当我运行webpack-dev-server 命令时，它会运行服务器，但是当我对任何 js 文件进行更改时，它们不会即时编译。所以我不得不停止服务器并运行webpack，然后运行webpack-dev-server 命令以使事情正常进行。

如何让webpack-dev-server 工作，以便在监视所有 js、css、scss 文件并编译它们时运行？

【问题讨论】：

标签： javascript webpack ecmascript-6 webpack-dev-server

【解决方案1】：

如果您使用的是 IDE，则必须禁用“安全写入”。

请注意，许多编辑器支持“安全写入”功能并默认启用它，这使得开发服务器无法正确观看文件。 “安全写入”是指更改不是直接写入原始文件，而是写入临时文件，当保存操作成功完成时，临时文件被重命名并替换原始文件。此行为会导致文件观察程序丢失轨道，因为原始文件已被删除。为了防止这个问题，你必须在你的编辑器中禁用“安全写入”功能。

http://webpack.github.io/docs/webpack-dev-server.html#hot-mode

【讨论】：