我已经从 Facebook 的 create-react-app 中 fork (或弹出
)元素,需要添加一些额外的工具(例如测试、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';
最佳答案
从 npm 或 yarn 安装 less 和 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
关于css - 减少对生产 webpack 配置的支持(来自 Facebook 的 create-react-app),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39455117/