create-react-app扩展webpack配置

首先创建一个react项目，使用新的方式 npx

npx create-react-app my-app

网上有很多方法去扩展react的webpack，比较常见的做法是运行 yarn eject 将所有的react配置暴露出来。但是这样就会使得项目变得臃肿，看起来代码多了很多。这里不做介绍。

今天介绍另外一种扩展webpack的方式 customize-cra

一、首先是安装依赖

yarn add -D customize-cra react-app-rewired

二、修改 package.json 的 scripts 配置

"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 = {};

五、添加一些常用的配置项

目前所配置的有：跨域设置，px 转 rem，ant-design-mobile 按需加载，打包压缩css 和 js，快捷路径

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

// 安装 lib-flexible 设置跟元素的font-size
yarn add lib-flexible -D

// 安装 babel-plugin-import 按需引入ant
yarn add babel-plugin-import -D

下面是一些 config-overrides.js 的配置

const path = require('path');
const {
  override,
  fixBabelImports,
  addWebpackAlias,
  overrideDevServer,
  addPostcssPlugins
} = require('customize-cra'); // show https://github.com/arackaf/customize-cra
const CompressionWebpackPlugin = require('compression-webpack-plugin');

function resolve(dir) {
  return path.join(__dirname, '.', dir)
}

const addCustomize = () => config => {
  if (process.env.NODE_ENV === 'production') {
    // 关闭sourceMap
    config.devtool = false;
    // 配置打包后的文件位置
    // config.output.path = resolve('dist');
    // config.output.publicPath = './';
    // 添加js打包gzip配置
    config.plugins.push(
      new CompressionWebpackPlugin({
        test: /\.js$|\.css$/,
        threshold: 1024,
      }),
    )
  }
  return config;
}

const devServerConfig = () => config => {
  return {
    ...config,
    proxy: {
      '/api': {
        target: 'xxx',
        changeOrigin: true,
        pathRewrite: {
          '^/api': '/api',
        },
      }
    }
  }
}

module.exports = {
  webpack: override(
    // 配置antd 的按需引入
    fixBabelImports('import', {
      libraryName: 'antd-mobile',
      style: 'css'
    }),
    // 配置路径访问快捷键 @/xxx
    addWebpackAlias({
      '@': resolve('src'),
    }),
    // postCss 自动将px转为rem 需要配合 lib-flexible 使用
    addPostcssPlugins([
      require('postcss-pxtorem')({ rootValue: 75, propList: ['*'], minPixelValue: 2, selectorBlackList: ['am-'] })
    ]),
    // 压缩js等
    addCustomize()
  ),
  // 本地启动配置，可以设置代理
  devServer: overrideDevServer(
    devServerConfig()
  )
};

参考：

customize-cra

antd

create-react-app扩展webpack配置

猜你喜欢