1

モジュールを追加して CSS を別のファイルにエクスポートするように、 React Hot Loader ボイラープレート を変更しました。webpack.config.js

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

プラグインと同様に：

new ExtractTextPlugin('app.css')

参照用の完全なwebpack.config ファイルを次に示します。app.cssを実行すると正しくエクスポートされwebpackますが、開発用のホット リロード機能が無効になります。モジュールを次のように戻すと:

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

ホットリロードは正常に機能します (調整された webpack.config )。

開発中と運用準備完了コードのエクスポート中に、これら 2 つを簡単に切り替えるための最適なセットアップは何ですか? 私の考えでは、npm start( を呼び出すだけでnode server.js) を使用して自動的に開発モードを使用し、次に実行するwebpackかwebpack -p、自動的に本番環境を使用できれば、それが理想的です。

4

1 に答える 1

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>]
于 2016-03-08T02:34:52.150 に答える