wuh.site · create-react-app: 自定义webpack配置

在使用react开发的时候，一般是使用Create-react-app脚手架生成reactApp。当需要自定义webpack配置的时候，有以下几种方法:

customize-cra，react-app-rewired

npm install customize-cra react-app-rewired -S

首先安装插件
+其次在根目录下新建config-overrides.js 文件
配置config-overrides.js的文件内容

const { override, fixBabelImports, addLessLoader, addPostcssPlugins, overrideDevServer } = require('customize-cra')
const { resolve } = require('path')

// 打包配置
const addCustomize = () => config => {
  config.resolve.alias = {
    ...config.resolve.alias,
    '@': resolve(__dirname, './src')
  }
  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(),
    addCustomize(),
  ),
  devServer: overrideDevServer(
    devServerConfig()
  )
}

然后还需要下载一个react-app-rewired 包，将pakeage.json中的启动脚本文件，更换为react-app-rewired ***
参考链接如下：
REACTAPPREWIRED(create-react-app custom webpack config)

eject
在项目初始化之后，项目没有改动之前执行由create-react-app生成的脚本

yarn eject 
or
npm eject

会在根目录下生成一个config文件夹

剩下的就全部是webpack的内容啦, 官网链接：CREATEREACTAPP