css - 本番環境の webpack 構成へのサポートの追加 (Facebook の create-react-app から)

Question

eject私はFacebook のcreate-react-appプロジェクトからフォーク (または編集) しました。これには、いくつかの追加ツール (テスト、redux、less など) を追加する必要があり、パスから少し外れるとあまり問題になりません。

以下を使用して、ほとんど追加することができなかったと思いますwebpack.config.dev.js：

//......
module: {
preLoaders: [
  {
    test: /\.js$/,
    loader: 'eslint',
    include: paths.appSrc,
  }
],
loaders: [
  // Process JS with Babel.
  {
    test: /\.js$/,
    include: paths.appSrc,
    loader: 'babel',
    query: require('./babel.dev')
  },
  {
    test: /\.css$/,
    loader: 'style!css!postcss'
  },
  {
    test: /\.less$/,
    loader: 'style!css!postcss!less'
  },
  {
    test: /\.json$/,
    loader: 'json'
  },
  //......
  }
]
},//.....

反応/ブートストラップ ライブラリを取り込めるように、(おそらく誤って) CSS ローダーをそこに残しました。おそらく、これを行うためのより良い方法があります。

とにかく、にプリプロセッサを追加する方法について混乱していますwebpack.config.prod.js。これはスニペットです（Facebookの有益なコメント付き）：

loaders: [
  // Process JS with Babel.
  {
    test: /\.js$/,
    include: paths.appSrc,
    loader: 'babel',
    query: require('./babel.prod')
  },
  // The notation here is somewhat confusing.
  // "postcss" loader applies autoprefixer to our CSS.
  // "css" loader resolves paths in CSS and adds assets as dependencies.
  // "style" loader normally turns CSS into JS modules injecting <style>,
  // but unlike in development configuration, we do something different.
  // `ExtractTextPlugin` first applies the "postcss" and "css" loaders
  // (second argument), then grabs the result CSS and puts it into a
  // separate file in our build process. This way we actually ship
  // a single CSS file in production instead of JS code injecting <style>
  // tags. If you use code splitting, however, any async bundles will still
  // use the "style" loader inside the async code so CSS from them won't be
  // in the main CSS file.
  {
    test: /\.css$/,
    // "?-autoprefixer" disables autoprefixer in css-loader itself:
    // https://github.com/webpack/css-loader/issues/281
    // We already have it thanks to postcss. We only pass this flag in
    // production because "css" loader only enables autoprefixer-powered
    // removal of unnecessary prefixes when Uglify plugin is enabled.
    // Webpack 1.x uses Uglify plugin as a signal to minify *all* the assets
    // including CSS. This is confusing and will be removed in Webpack 2:
    // https://github.com/webpack/webpack/issues/283
    loader: ExtractTextPlugin.extract('style', 'css?-autoprefixer!postcss')
    // Note: this won't work without `new ExtractTextPlugin()` in `plugins`.
  },

安定したパフォーマンスの高い方法でプリプロセッサの少ないステップを追加するにはどうすればよいですか?

コンテキストについては、私のindex.jsインポートは次のようになります。

import React from 'react';
import ReactDOM from 'react-dom';
import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap/dist/css/bootstrap-theme.css';
import { CommentsSectionContainer } from './components/CommentsSection';
import './index.less';