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以供参考。虽然这在我运行app.css时正确导出webpack，但它会终止热重新加载功能以进行开发。如果我将模块恢复为：

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

Webpack提取CSS用于生产，内联开发

1 个答案: