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() ) };
参考: