Webpack Extract CSS 用于生产，内联用于开发

Question

我修改了 React Hot Loader Boilerplate webpack.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

像典型的 React 应用通常使用的那样使用 process.env.NODE_ENV。喜欢，

"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>]

Webpack Extract CSS 用于生产，内联用于开发

Webpack Extract CSS for Production, Inline for Development

reactjs

webpack

webpack-dev-server

webpack-style-loader

react-hot-loader