为什么我必须一次又一次地运行“webpack”命令？

Question

我正在处理一个 React 项目。每次我对任何 .js 文件进行任何更改时，我都必须再次在终端中运行“webpack”命令以使更改反映在浏览器上。有什么办法可以让我不必再次运行“webpack”命令。

webpack.config.js

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

module.exports = {
    devServer: {
        inline: true,
        contentBase: './src',
        port: 3000
    },
    devtool: 'cheap-module-eval-source-map',
    entry: './dev/js/index.js',
    module: {
        loaders: [
            {
                test: /\.js$/,
                loaders: ['babel'],
                exclude: /node_modules/
            },
            {
                test: /\.scss/,
                loader: 'style-loader!css-loader!sass-loader'
            }
        ]
    },
    output: {
        path: 'src',
        filename: 'js/bundle.min.js'
    },
    plugins: [
        new webpack.optimize.OccurrenceOrderPlugin()
    ]
};

Answer 1

你需要webpack-dev-server 和 react hot loader，你还需要开发配置。请查看此页面ReactHotLoader，如果您发现这里的评论很复杂，我会为您提供更多可能有用的链接。

另外请看一下这个例子Github:React-redux-app，这可以帮助你设置你的开发环境。

Answer 2

这很简单。只需运行带有 -w 标志的 webpack 以使其监视更改并在每次更改时重新构建。

webpack -w