记create-react-app 配置webpack

create-react-app 配置webpack

前言

最近一直用vue作技术栈，很久没有用react了，因此直接用react开搞。

create-react-app my-progress --typescript
复制代码

一、修改webpack配置文件，须要安装 react-app-rewired customize-cra

yarn add react-app-rewired customize-cra -D
复制代码

二、修改package.json文件

"scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test --env=jsdom",
    "eject": "react-scripts eject"
  },
复制代码

三、在项目根目录新建config-overrides.js

const { override } = require('customize-cra');
module.exports = {};
复制代码

四、添加配置，跨域设置、增长less支持、px转rem、ant-design-mobile按需加载、打包压缩js和css

// 安装less less-loader
yarn add less less-loader -D
// 安装compression-webpack-plugin 压缩js为gzip
yarn add compression-webpack-plugin -D

const { override, overrideDevServer, addLessLoader, addPostcssPlugins, fixBabelImports } = require('customize-cra');
const CompressionWebpackPlugin = require('compression-webpack-plugin');
// 打包配置
const addCustomize = () => config => {
  if (process.env.NODE_ENV === 'production') {
    // 关闭sourceMap
    config.devtool = false;
    // 配置打包后的文件位置
    config.output.path = __dirname + '../dist/demo/';
    config.output.publicPath = './demo';
    // 添加js打包gzip配置
    config.plugins.push(
      new CompressionWebpackPlugin({
        test: /\.js$|\.css$/,
        threshold: 1024,
      }),
    )
  }
  return config;
}
// 跨域配置
const devServerConfig = () => config => {
  return {
    ...config,
    // 服务开启gzip
    compress: true,
    proxy: {
      '/api': {
        target: 'xxx',
        changeOrigin: true,
        pathRewrite: {
          '^/api': '/api',
        },
      }
    }
  }
}
module.exports = {
  webpack: override(
    fixBabelImports('import', {
      libraryName: 'antd-mobile',
      style: 'css',
    }),
    addLessLoader(),
    addPostcssPlugins([require('postcss-pxtorem')({ rootValue: 75, propList: ['*'], minPixelValue: 2, selectorBlackList: ['am-'] })]),
    addCustomize(),
  ),
  devServer: overrideDevServer(
    devServerConfig()
  )
}
复制代码

flex布局在低版本手机不兼容

测试小朋友和我说在低版本ios8的系统样式直接错乱，这边经过safari调试发现原来是flex没有添加前缀致使。 直接修改package.json文件中的browserslist

"browserslist": {
    "defaults",
    "not ie < 11",
    "last 2 versions",
    "> 1%",
    "iOS 7",
    "last 3 iOS versions"
}
复制代码

ok，完美。

参考

antd-mobile
customize-cra