增加对生产webpack配置的支持（来自Facebook的create-react-app）

Question

我已经在Facebook的create-react-app项目中分叉（或eject ），需要添加一些额外的工具（例如测试，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加载器放在那里（可能不正确），这样我就可以引入react / bootstrap库了。 也许有更好的方法来做到这一点。

无论如何，我对如何在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';

Answer 1

从npm或yarn安装越来越少的装载机：

npm install --save-dev less less-loader

点击此链接安装extract-text-webkit-plugin：

https://github.com/webpack/extract-text-webpack-plugin

首先，你需要在加载器数组中添加加载器，之后css可能对可读性有意义。 它看起来像这样：

{
  test: /\.less$/, 
  loader:  ExtractTextPlugin.extract("style-loader", "css-loader!less-loader")
}

然后初始化插件数组中的插件：

new ExtractTextPlugin('[name].css')

Thaaaaaat应该使用另一个yarnpkg start