注: 如未找到配置文件请使用npm run eject弹出配置文件

设置代理

在开发中往往是跨域请求的，配置一下请求代理可以解决这个问题

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

模块热替换(HMR)

默认情况下在每次修改内容的时候都会刷新页面，有时候我们并不想要这样，比如有一个bug需要重复点击或者重复操作多次才能实现，但是由于我们每次修改都会刷新页面，可能会导致这个bug很难被测试或者实现，这个配置在我看来非常有用，当然这不是必须的，但是可以适当的提高开发效率。在React 的入口文件 src/index.js中，添加一些配置代码。

// src/index.jsimport React from 'react';import ReactDOM from 'react-dom';import App from './App';import './index.css';ReactDOM.render(  
    ,  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

支持装饰器写法

比如redux或者mobx可以使用@写法

• 安装

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 设置有问题？请先查看这个  。

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

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

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

配置简化路径

当页面嵌套过深时我们会发现在路径通常都要这么写

// 修改 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之后发现包体积比较大，用 分析各个js文件的打包

// webpack.config.prod.jsconst 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              )            ),    }