的WebPack提取CSS进行生产，内联发展

Question

我修改了React Hot Loader Boilerplatewebpack.config.js，使其CSS导出到一个单独的文件中通过添加模块：

{ 
    test: /\.scss$/, 
    include: /src/, 
    loader: ExtractTextPlugin.extract(
     'style', 
     'css!postcss!sass' 
    ) 
} 

除了插件：

new ExtractTextPlugin('app.css') 

以下是完整的webpack.config file供参考。虽然这在我运行webpack时正确地输出app.css，但它杀死了用于开发的热重载功能。如果我将模块还原为：

{ 
    test: /\.scss$/, 
    include: /src/, 
    loaders: [ 
     'style', 
     'css', 
     'postcss-loader', 
     'sass' 
    ] 
} 

热加载正常工作（adjusted webpack.config）。

当我正在开发与导出生产就绪代码时，什么是在这两者之间轻松切换的最佳设置？在我看来，如果我可以使用npm start（它只是调用node server.js）自动使用开发模式，然后运行webpack或webpack -p来自动使用生产，那将是理想的。

Answer 1

使用process.env.NODE_ENV就像典型的React应用程序通常使用的那样。像，

"scripts": { 
    "start": "NODE_ENV=development node server.js", 
    ... 

，并在配置文件中：

var cssLoader; 
if (process.env.NODE_ENV === 'production') { 
    cssLoader = { <... your production-use loader setup> } 
} else { 
    cssLoader = { <... your development-use loader setup> } 
} 
... 
loaders: [cssLoader, <...other loaders>]