新版create-react-app eject 配置及代理（未完待續(xù)）

一、配置less

yarn add less less-loader 

// webpack.config.js 新版已配置SaaS
const lessRegex = /\.less$/;
const lessModuleRegex = /\.module\.less$/;

         {
            test: lessRegex,
              exclude: lessModuleRegex,
              use: getStyleLoaders(
                {
                  importLoaders: 2,
                  sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment
                },
                'less-loader'
              ),
              sideEffects: true
            },
            {
              test: lessModuleRegex,
              use: getStyleLoaders(
                {
                  importLoaders: 2,
                  sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment,
                  modules: true,
                  getLocalIdent: getCSSModuleLocalIdent
                },
                'less-loader'
              )
            },

二、安裝antd，同時(shí)修改默認(rèn)主題

yarn add antd babel-plugin-import

引用antd

import {Button} from 'antd'

在package.json中修改，也可以在webpack.config.js中更改，不過需要修改dev和prod兩個(gè)環(huán)境。

"babel": {
    "presets": [
      "react-app"
    ],
    "plugins": [
      [
        "import",
        {
          "libraryName": "antd",
          "libraryDirectory": "es",
          "style": "css"
        }
      ]
    ]
  }

修改默認(rèn)主題

// 首先 babel插件中 style改成true
"babel": {
    "presets": [
      "react-app"
    ],
    "plugins": [
      [
        "import",
        {
          "libraryName": "antd",
          "libraryDirectory": "es",
          "style": true // // `style: true` 會(huì)加載 less 文件
        }
      ]
    ]
  }
// 然后在webpack中修改getStyleLoaders方法，新版less loader抽成公共函數(shù)了
const getStyleLoaders = (cssOptions, preProcessor) => {
    const loaders = [
      isEnvDevelopment && require.resolve('style-loader'),
      isEnvProduction && {
        loader: MiniCssExtractPlugin.loader,
        options: Object.assign({}, shouldUseRelativeAssetPaths ? { publicPath: '../../' } : undefined)
      },
      {
        loader: require.resolve('css-loader'),
        options: cssOptions
      },
      {
        // Options for PostCSS as we reference these options twice
        // Adds vendor prefixing based on your specified browser support in
        // package.json
        loader: require.resolve('postcss-loader'),
        options: {
          // Necessary for external CSS imports to work
          // https://github.com/facebook/create-react-app/issues/2677
          ident: 'postcss',
          plugins: () => [
            require('postcss-flexbugs-fixes'),
            require('postcss-preset-env')({
              autoprefixer: {
                flexbox: 'no-2009'
              },
              stage: 3
            })
          ],
          sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment
        }
      }
    ].filter(Boolean);
    // 修改這里
    if (preProcessor) {
      // loaders.push({
      //   loader: require.resolve(preProcessor),
      //   options: {
      //     sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment
      //   }
      // });
      let loader = require.resolve(preProcessor);
      if (preProcessor === 'less-loader') {
        loader = {
          loader,
          options: {
            modifyVars: {
              'primary-color': 'red'
            },
            javascriptEnabled: true
          }
        };
      }
      loaders.push(loader);
    }
    return loaders;
  };

沒有生效？ antd官網(wǎng)提示

注意樣式必須加載 less 格式，一個(gè)常見的問題就是引入了多份樣式，less 的樣式被 css 的樣式覆蓋了。

  • 如果你在使用 babel-plugin-import 的 style 配置來引入樣式，需要將配置值從 'css' 改為 true，這樣會(huì)引入 less 文件。

  • 如果你是通過 'antd/dist/antd.css' 引入樣式的，改為 antd/dist/antd.less。

三、react -hot-loader

修改的部分自動(dòng)刷新，和自動(dòng)刷新網(wǎng)頁不同的是，hot-loader并不會(huì)刷新網(wǎng)頁，僅僅是替換修改的部分。
配置react-hot-loader

yarn add react-hot-loader -s

修改webpack.config.js

{
              test: /\.(js|mjs|jsx|ts|tsx)$/,
              include: paths.appSrc,
              loader: require.resolve('babel-loader'),
              options: {
                customize: require.resolve('babel-preset-react-app/webpack-overrides'),

                plugins: [
                  [
                    require.resolve('babel-plugin-named-asset-import'),
                    {
                      loaderMap: {
                        svg: {
                          ReactComponent: '@svgr/webpack?-svgo![path]'
                        }
                      }
                    },
                    "react-hot-loader/babel"  // plugin中加上react-hot-loader
                  ]
                ],
                cacheDirectory: true,
                cacheCompression: isEnvProduction,
                compact: isEnvProduction
              }
            },

在App.js中配置使用

import { hot } from 'react-hot-loader';
export default hot(module)(App);

重啟后可以看到修改部分已經(jīng)刷新而瀏覽器網(wǎng)頁沒有刷新。

四、配置redux

// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { applyMiddleware, compose, createStore } from 'redux';
import { createBrowserHistory } from 'history';
import { routerMiddleware } from 'connected-react-router';
import createRootReducer from './reducers';
import { Provider } from 'react-redux';
import { LocaleProvider } from 'antd';
import zhCN from 'antd/lib/locale-provider/zh_CN';
import { AppContainer } from 'react-hot-loader';
import createSagaMiddleware from 'redux-saga';
import rootSaga from './reducers/saga';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

export const history = createBrowserHistory(); // 路由

let sagaMiddleware = createSagaMiddleware(); //創(chuàng)建saga中間件
const composeEnhancer = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

const store = createStore(
  createRootReducer(history), // root reducer with router state
  composeEnhancer(
    applyMiddleware(
      sagaMiddleware,
      routerMiddleware(history) // for dispatching history actions
      // ... other middlewares ...
    )
  )
);

sagaMiddleware.run(rootSaga);

// AppContainer（hot-loader）=》LocaleProvider （antd國際化）=》Provider （react-redux頂級組件放入store=》App 頁面最高級組件負(fù)責(zé)路由）
const render = () => {
  ReactDOM.render(
    <AppContainer> 
      <LocaleProvider locale={zhCN}>
        <Provider store={store}>
          <App history={history} />
        </Provider>
      </LocaleProvider>
    </AppContainer>,
    document.getElementById('root')
  );
};
render();
serviceWorker.unregister();


// App.js
import React from 'react';
import { hot } from 'react-hot-loader';
import { ConnectedRouter } from 'connected-react-router';
import routes from './routes';
import PropTypes from 'prop-types';

// 關(guān)聯(lián)路由
const App = ({ history }) => {
  return <ConnectedRouter history={history}>{routes}</ConnectedRouter>;
};

App.propTypes = {
  history: PropTypes.object
};

export default hot(module)(App);


// router.js
import React from 'react';
import { Route, Switch } from 'react-router';

const Home = props => (
  <div>
    <h2>haha </h2>
  </div>
);

const routes = (
  <Switch>
    <Route exact path='/' component={Home} />
  </Switch>
);
export default routes;

// reducer.js
import { combineReducers } from 'redux';
import { connectRouter } from 'connected-react-router';

const createRootReducer = history =>
  combineReducers({
    router: connectRouter(history)
  });

export default createRootReducer;

// saga.js
import { all } from "redux-saga/effects";
import { watchFetchCate } from "./global";

export default function* rootSaga() {
  yield all([watchFetchCate()]);
}

五、配置代理

新版本cra腳手架在package.json中使用proxy只能用字符串了。官網(wǎng)給了新的使用方式，在src下新建文件setupProxy.js加下面代碼，無需單獨(dú)應(yīng)用，webpack會(huì)自動(dòng)引入文件。
一個(gè)大坑：因?yàn)槲矣胻ypescript了，文件名結(jié)尾.ts導(dǎo)致文件不生效?。。∏杏?js文件結(jié)尾

const proxy = require('http-proxy-middleware');

module.exports = function(app) {
  app.use(proxy('/house', { target: 'https://evaluatepre.jd.com' }));
  app.use(proxy('/vehicle', { target: 'https://evaluatepre.jd.com' }));
  app.use(
    proxy("/user", {
      target: "https://test.com",
      changeOrigin: true
    })
  );
  
};
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 版權(quán)聲明：本文為博主原創(chuàng)文章，未經(jīng)博主允許不得轉(zhuǎn)載。 webpack介紹和使用 一、webpack介紹 1、由來 ...
    it筱竹閱讀 11,463評論 0贊 21
  • Facebook官方推出Create-React-App腳手架，基本可以零配置搭建基于webpack的React開...
    邱鵬城閱讀 39,084評論 13贊 49
  • 說明 React官方腳手架工具Create-react-app 用于快速創(chuàng)建React應(yīng)用，但依舊有局限性，我們根...
    走叉火日立閱讀 9,789評論 8贊 14
  • 今天讀到250頁，這兩天沒怎么看書了，但是這塊也有些體會(huì)，特別是結(jié)合自己目前在學(xué)習(xí)時(shí)間管理這塊。 在決策這塊和我們...
    酒茶醫(yī)閱讀 200評論 0贊 1
  • 我喜歡春風(fēng)。它帶來了復(fù)蘇，帶來了明媚的春光，帶來了暖暖的春日，當(dāng)春日暖暖的照著。當(dāng)春風(fēng)輕輕的掠過我的臉頰，心里就似...
    幸運(yùn)星_8fab閱讀 288評論 0贊 1

友情鏈接更多精彩內(nèi)容