3
몇 가지 추가 도구 (예 : 테스트, redux, less 등)를 추가해야하는 Facebook의 create-react-app 프로젝트를 분기 처리했습니다 (또는 eject ed). .) 그리고 약간의 길을 길 잃는 것이 너무 문제가되지 않는다는 아마 순진한 가정.프로덕션 웹팩 구성에 대한 지원 추가 (Facebook의 create-react-app에서 제공)
난 그냥에 대한 webpack.config.dev.js 다음 사용하여 적은 추가 관리가 생각 : 나는 반응/부트 스트랩 라이브러리에 가져올 수 있도록 내가 거기에 (아마도 잘못)에서 CSS 로더를 떠난
//......
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'
},
//......
}
]
},//.....
. 아마도 이것을하는 더 좋은 방법이있을 것입니다.
어쨌든 webpack.config.prod.js에 전 처리기를 추가하는 방법에 대해 혼란 스럽습니다. 여기에 (페이스 북의 도움이 의견) 단편이다
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`.
},
가 어떻게 안정적이고 성능이 좋은 방법으로 덜 전처리 단계를 추가 할 수 있습니까? 추출 텍스트 - 웹킷 - 플러그인을 설치하려면이 링크를 따라
npm install --save-dev less less-loader
:
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';