3

我已经分叉（或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 加载器留在了那里（可能是错误的），以便我可以引入 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';
4

1 回答 1

1

从 npm 或 yarn 安装越来越less-loader：

npm install --save-dev less less-loader

按照此链接安装 extract-text-webkit-plugin：

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

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

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

然后在 plugins 数组中初始化插件：

new ExtractTextPlugin('[name].css')

Thaaaaaat 应该和另一个人一起做yarnpkg start

于 2017-01-15T05:41:29.710 回答