React+Antd+Webpack+Css模块化相关知识点记录

Css模块化相关

webpack打包配置处理CSS样式的时候,如果设置了modules:true的话,就开启了css模块化配置.


// Modular loader components styles
{
      test: /\.(css|less|scss)$/,
        exclude: config.nodeModules,
        include: config.src,
        use: [
        {
        loader: prodMode ? MiniCssExtractPlugin.loader : 'style-loader'
        },
        {
            loader: 'css-loader',
            options: {
                // sourceMap: true,
                modules: true,
                localIdentName: '[local]___[hash:base64:5]'
            }
            },
            {
                loader: 'postcss-loader',
                options: {
                    plugins: () => [require('autoprefixer')()]
                }
            },
            {
                loader: 'less-loader',
                options: {
                    javascriptEnabled: true
                }
            }
        ]
   },
   // Customize antd themes
    {
          test: /\.(css|less|scss)$/,
           exclude: config.src,
           use: [
        {
            loader: prodMode ? MiniCssExtractPlugin.loader : 'style-loader'
         },
        {
          loader: 'css-loader'
        },
         {
             loader: 'less-loader',
              options: {
                      modifyVars: config.theme,
                      javascriptEnabled: true,
                      // sourceMap: true
                        }
                    }
        ]
  },

页面引入css样式的方式有两种:

  • import './index.scss';
  • import style from './index.scss'

第一种方式,css样式是全局引入的.样式文件中需要加入:global,样式文件才会生效.(如果不加的话,在webpack配置中将modules:false也可以,但不建议这么操作)

第二种方式的引入样式的话,不需要再样式文件里加入:global,但是在jsx中使用样式的时候,要用对象的写法读取.这时webpack会自动加入唯一的hash值. 例如:


<div className="header"></div>

<div className={style.header}>

</div>

webpack proxy 配置多个代理


 proxy: {
        '/api/base': {
            target: 'http://base.901web.com',
            changeOrigin: true,
            pathRewrite: {
                '^/api/base': ''
            }
        },
        '/api/sales': {
            target: 'http://sales.901web.com',
            changeOrigin: true,
            pathRewrite: {
                '^/api/sales': ''
            }
        },
        '/api/goods': {
            target: 'http://goods.901web.com',
            changeOrigin: true,
            pathRewrite: {
                '^/api/goods': ''
            }
        }
    }

配置store,redux中间件,以及使用Antd,分页弹框,中文化配置

// 创建store文件:

    import { createStore, applyMiddleware, compose } from 'redux';
    import thunkMiddleware from "redux-thunk";
    import logger from 'redux-logger'
    import reducer from './reducer.js';
    
    
    const middlewares = [thunkMiddleware, logger];
    
    
    const storeEnhancers = compose(
      applyMiddleware(...middlewares),
      window.__REDUX_DEVTOOLS_EXTENSION__ ?window.__REDUX_DEVTOOLS_EXTENSION__() : f => f
    );
    
    const store = createStore(reducer, {}, storeEnhancers);
    
    export default store;


import { Provider } from 'react-redux';
import zhCN from 'antd/lib/locale-provider/zh_CN';
import App from './App';
// 引入项目中的store文件
import store from './store/store';
    
<Provider store={store}>
    <ConfigProvider locale={zhCN}>
        <App>   
            {
                
                // 其他代码
            
            }
        </App>
    </ConfigProvider>
</Provider>

// 模板文件中通过connect连接后,通过props拿到reducer中的值.


import { connect } from 'react-redux';
    
function NewsList(props){
    
    const {list} = props;
        
}
    
    
const mapStateToProps = state => ({
  ...state
});

const mapDispatchToProps = dispatch => ({ dispatch });

export default connect(mapStateToProps, mapDispatchToProps)(NewsList);