create-react-app 开发配置

注: 如未找到配置文件请使用npm run eject弹出配置文件
当前对应版本react 16.2

设置代理

在开发中每每是跨域请求的，配置一下请求代理能够解决这个问题

// package.json 文件
"proxy": "http://xxx.xxx",

模块热替换(HMR)

默认状况下在每次修改内容的时候都会刷新页面，有时候咱们并不想要这样，好比有一个bug须要重复点击或者重复操做屡次才能实现，可是因为咱们每次修改都会刷新页面，可能会致使这个bug很难被测试或者实现，这个配置在我看来很是有用，固然这不是必须的，可是能够适当的提升开发效率。在React 的入口文件 src/index.js中，添加一些配置代码。

// src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './index.css';
ReactDOM.render(
  <App />,
  document.getElementById('root')
);
//  +++++ 加入+++++
if (module.hot) {
  module.hot.accept();
}

css局部化

• 正常导入css状况下会污染到全局
• 修改 webpack-config-dev.js 及 webpack-config-prod.js 配置

options: {
  modules: true,
  localIdentName: '__[local]--[hash:base64:5]'
}

其次有其余css局部化解决方案 好比 styled-components
可参考我另一篇文章 骚里骚气的styled-components快速入门

支持装饰器写法

好比redux或者mobx能够使用@写法

• 安装 transform-decorators-legacy

npm install --save-dev babel-plugin-transform-decorators-legacy

插件中使用legacy是由于Babel 5支持处理装饰器，可是它也许会跟最终的标准有区别，因此才使用legacy这个词。

//  package.json

"babel": {
    "presets": [
      "react-app"
    ],
    "plugins": [
 // +++ 加入配置 +++
      "transform-decorators-legacy",
      // ...ant配置
    ]
  }

请注意， plugins 的属性很是重要: transform-decorators-legacy 应该放在最前面。 babel 设置有问题？请先查看这个 issue 。

打包后路径问题致使页面空白

//  package.json 文件增长配置
...
"homepage": ".",
...

注: 若是直接打开index.html后文件正确加载但页面仍然空白，请检查你是否使用的是 BrowserRouter (同vue的history模式)须要后端配置支持，不然请使用HashRouter 即带 #

配置简化路径

当页面嵌套过深时咱们会发如今路径一般都要这么写
import xx from './../../../xxx/qqq'
经过配置webpack能够写成
import xx from '@/xxx/qqq'

// 修改 webpack.config.dev 与 webpack.config.prod 两个文件 加入相同配置

...

// +++ 找个开心的地方加入配置
function resolve(dir) {
    return path.join(__dirname, '..', dir)
}

// 修改
alias: {
      'react-native': 'react-native-web',
        // +++ 加入配置
      '@': resolve('src')
}

• 优势: 若是按照相对路径的方法引用，每次要计算.. 而且文件一旦迁移 那么又要__从新计算__，如此配置文件迁移也不须要计算
• 缺点: 在部分编辑器可能会__失去文件引用高亮__(好比webstrom), 而且不能经过快捷键快速查找其引用.

注 : 这属于webpack的配置，固然在vue-cli中也适用(更新:目前vue-cli已经默认支持这种配置)

按需引用antd-mobile（antd同）

• 安装 antd-mobile npm i antd-mobile -S
• 安装 babel-plugin-import npm i babel-plugin-import -D

// package.json 文件
  "babel": {
    "presets": [
      "react-app"
    ],
    // 加入配置
    "plugins": [
    // 若是使用了 定制颜色功能 将 "css" => true 同时须要配置 less
      ["import", { "libraryName": "antd-mobile", "style": "css" }]
    ]
  }

打包构建分析

build以后发现包体积比较大，用 webpack-bundle-analyzer 分析各个js文件的打包

// webpack.config.prod.js
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

// ...code

// 找到 plugins 记得别加错地方 不少 new xxx()的才是

plugins: [
    new xxx(),
    nex xxx(),
    new BundleAnalyzerPlugin(),
]

生产环境去掉map文件

// webpack.config.prod.js
- devtool: shouldUseSourceMap ? 'source-map' : false
// 改成
devtool: false,

配置less

• 安装 yarn add less-loader less --dev

//  webpack.config.dev.js
  module: {
    strictExportPresence: true,
    //...
    rules: [
        // ...
         {
            test: /\.(css|less)$/, // 修改
            use: [
              require.resolve('style-loader'),
              {
                loader: require.resolve('css-loader'),
                options: {
                  importLoaders: 1,
                },
              },
              {
                loader: require.resolve('postcss-loader'),
                options: {},
              },
              // 增长
              {
                loader: require.resolve('less-loader') // compiles Less to CSS
              }
            ],
          },
    ]
    
// webpack.config.prod.js

{
    test: /\.(css|less)$/, // 修改
                loader: ExtractTextPlugin.extract(
              Object.assign(
                {
                  fallback: {
                    loader: require.resolve('style-loader'),
                    options: {
                      hmr: false,
                    },
                  },
                  use: [
                  // ...code
                    {
                      loader: require.resolve('less-loader') // 增长
                    }
                  ],
                },
                extractTextPluginOptions
              )
            ),
    

}