关注 Linr 公众号
cra
const paths = require('react-scripts/config/paths');
paths.appBuild = path.join(path.dirname(paths.appBuild), 'dist'); // 修改打包目录
// Override `create-react-app` default configs for Jest.
const jestConfig = require('./jest.config');
module.exports = {
jest(config) {
return { ...config, ...jestConfig };
},
};
module.exports = function override(config, env) {
config.module.rules = config.module.rules.map(rule => {
if (rule.oneOf instanceof Array) {
return {
...rule,
oneOf: [
{
test: /\.(svg|png|jpg|jpeg|gif|bmp|tiff)$/i,
use: [
{
loader: 'file-loader',
options: {
name: '[path][name]-[hash:8].[ext]'
}
}
]
},
...rule.oneOf
]
};
}
return rule;
});
return config;
}
Putting react-app-rewired config AFTER customize-cra worked for me. It doesn't work though if I assign an object to config, but works if I fix config line by line. I'm sure there is a more elegant solution.
module.exports = function override(config, env) {
const APP = process.env.REACT_APP_APP
const BRAND = process.env.REACT_APP_BRAND
addWebpackAlias({
['@app-config']: path.resolve(__dirname, `./src/brands/${BRAND}/app`),
})
config.entry = `./src/${APP}/index.js`
config.resolve.alias['@app-config'] = path.resolve(__dirname, `./src/brands/${BRAND}`)
config.resolve.modules = [
path.join(__dirname, `src/brands/${BRAND}`)
].concat(config.resolve.modules)
return config
};
Can i replace options only for specific plugin without reseting all plugins created by react-app?
const path = require('path');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = function override(config, env) {
if( !config.plugins ) {
config.plugins = [];
}
const miniCssOptions = {
filename: "[name].[hash].css"
}
let miniCssAdded = false;
if( config.plugins.length ) {
config.plugins.forEach( p => {
if( p instanceof MiniCssExtractPlugin) {
delete p;
p = new MiniCssExtractPlugin( miniCssOptions );
miniCssAdded = true;
}
})
}
if( !miniCssAdded ) {
config.plugins.push( new MiniCssExtractPlugin( miniCssOptions ) );
}
config.plugins.push( new CleanWebpackPlugin() );
config.plugins.push( new HtmlWebpackPlugin({
title: 'Caching',
}) );
config.output.filename ='static/js/[name].[hash].js';
config.output.chunkFilename ='static/js/[name].[hash].js';
config.output.path = path.resolve(__dirname, 'build');
config.optimization.splitChunks= {
cacheGroups: {
vendor: {
test: /[\\/]node_modules[\\/]/,
name: 'vendors',
chunks: 'all',
}
}
}
return config;
}
I think you almost made it. But delete p is NOT a way to delete item from an array. you should use .splice, which can delete items from array and add items in the meantime:
config.plugins.forEach( (p,i) => {
if( p instanceof MiniCssExtractPlugin) {
//delete p;
config.plugins.splice(i,1, new MiniCssExtractPlugin( miniCssOptions ));
}
})
const path = require('path');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = function override(config, env) {
if( !config.plugins ) {
config.plugins = [];
}
const miniCssOptions = {
filename: "[name].[hash].css"
}
let miniCssAdded = false;
if( config.plugins.length ) {
config.plugins.forEach( p => {
if( p instanceof MiniCssExtractPlugin) {
delete p;
p = new MiniCssExtractPlugin( miniCssOptions );
miniCssAdded = true;
}
})
}
if( !miniCssAdded ) {
config.plugins.push( new MiniCssExtractPlugin( miniCssOptions ) );
}
config.plugins.push( new CleanWebpackPlugin() );
config.plugins.push( new HtmlWebpackPlugin({
title: 'Caching',
}) );
config.output.filename ='static/js/[name].[hash].js';
config.output.chunkFilename ='static/js/[name].[hash].js';
config.output.path = path.resolve(__dirname, 'build');
config.optimization.splitChunks= {
cacheGroups: {
vendor: {
test: /[\\/]node_modules[\\/]/,
name: 'vendors',
chunks: 'all',
}
}
}
return config;
}
"scripts": {
"format": "prettier --write",
"start": "PORT=3001 react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test"
},
https://stackoverflow.com/questions/58344625/react-application-production-build-static-folder-path-changes?r=SearchResults
You can use useBabelRc() function of customize-cra and in .babelrc, you can write babel config for antd.
{
"plugins": ["@babel/plugin-proposal-optional-chaining"]
}
https://medium.com/@adostes/enabling-optional-chaining-in-a-create-react-app-a9f626a515d9
var paths = require('react-scripts-ts/config/paths')
module.exports = function override(config) {
config.module.rules.push({
test: /\.(js|jsx)$/,
include: paths.appSrc,
loader: require.resolve('babel-loader'),
options: {
babelrc: false,
presets: [require.resolve('babel-preset-react-app')],
cacheDirectory: true,
},
});
config.module.rules.push({
test: /\.(ts|tsx)$/,
include: paths.appSrc,
loader: ['ts-loader'],
});
return config
}
Import typescript file inside javascript file
https://mikebridge.github.io/post/getting-started-typescript-react/
How do I change `src` folder to something else in create-react-app
const path = require('path');
module.exports = {
paths: function (paths, env) {
paths.appIndexJs = path.resolve(__dirname, 'mysrc/client.js');
paths.appSrc = path.resolve(__dirname, 'mysrc');
return paths;
},
}
https://stackoverflow.com/questions/44448851/how-do-i-change-src-folder-to-something-else-in-create-react-app/54625811?r=SearchResults#54625811
https://github.com/timarney/react-app-rewired#extended-configuration-options
module.exports = override(
config => ({
...config,
output: {
...config.output,
globalObject: 'this',
},
}),
addWebpackModuleRule({
test: /\.worker\.js$/,
use: { loader: 'worker-loader' },
}),
// addWebpackModuleRule({
// test: /\.wasm$/,
// use: { loader: 'wasm-loader' },
// }),
//https://github.com/YumcoderCom/yumgram/blob/master/config-overrides.js
module.exports = {
webpack (config, env) {
// Log current env
console.log('Current env', env)
// Inject global vars
config.plugins = (config.plugins || []).concat([new webpack.DefinePlugin({
...constants[env], ENV: `'${env}'`
})])
config = override(
// Inject lazy loading for ant design css
fixBabelImports('import', {
libraryName: 'antd',
libraryDirectory: 'es',
style: true,
}),
// And override styles
addLessLoader({
javascriptEnabled: true,
modifyVars: {
'@primary-color': '#3DBD7D',
'@link-color': '#5678a4',
'@success-color': '#3DBD7D',
'@warning-color': '#ffaa00',
'@error-color': '#E94A4C',
'@border-color-base': '#3DBD7D',
'@box-shadow-base' : 'none'
}
}),
// Inject translation
...addBabelPlugins('@lingui/babel-plugin-transform-js', '@lingui/babel-plugin-transform-react')
)(config, env)
// Return the webpack config
return config
}
}
const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
module.exports = function override(config, env) {
config.resolve.plugins = config.resolve.plugins.filter(plugin => !(plugin instanceof ModuleScopePlugin));
return config;
};
按照 npm 包页上的步骤操作（安装包并在包.json 文件中翻转调用），并使用与此类似的文件：config-overrides.js
这将从使用的 WebPack 插件中删除 ModuleScopePlugin，但保留其余内容，并消除弹出的必要性。
module.exports = config => {
const scopePluginIndex = config.resolve.plugins.findIndex(
({ constructor }) => constructor && constructor.name === "ModuleScopePlugin"
);
config.resolve.plugins.splice(scopePluginIndex, 1);
return config;
};
配置重写.js
const { removeModuleScopePlugin } = require('customize-cra')
module.exports = removeModuleScopePlugin()
配置重写.js
const ModuleScopePlugin = require("react-dev-utils/ModuleScopePlugin");
const path = require("path");
module.exports = function override(config) {
config.resolve.plugins.forEach(plugin => {
if (plugin instanceof ModuleScopePlugin) {
plugin.allowedFiles.add(path.resolve("./config.json"));
}
});
//https://stackoverflow.com/questions/44114436/the-create-react-app-imports-restriction-outside-of-src-directory/58863926?r=SearchResults#
return config;
};
//Customizing antd Less or Css for create-react-app
function addLessRule(config, env)
{
const { getLoader, loaderNameMatches } = require("react-app-rewired");
const fileLoader = getLoader(
config.module.rules,
rule => loaderNameMatches(rule, 'file-loader')
);
const lessExtension = /\.less$/;
fileLoader.exclude.push(lessExtension);
const cssRules = getLoader(
config.module.rules,
rule => String(rule.test) === String(/\.css$/)
);
var lessModifyVars = {
'primary-color': '#990000',
'link-color': '#1DA57A',
'border-radius-base': '2px',
'layout-header-background' : '#f0f2f5'
};
var lessLoaders = [
{ loader: 'style-loader'} ,
{ loader: 'css-loader' },
{ loader: 'less-loader', options: {
modifyVars: lessModifyVars
} }
];
lessRule = {
test : lessExtension,
use: lessLoaders,
}
config.module["rules"].push( lessRule );
return config
}
//https://stackoverflow.com/questions/44611056/customizing-antd-less-or-css-for-create-react-app/51109561?r=SearchResults#51109561
//django-webpack-loader not rendering react app using react-app-rewired
var BundleTracker = require('webpack-bundle-tracker');
module.exports = {
webpack: (config, env) => {
config.plugins.push(
new BundleTracker({
path: __dirname,
filename: './build/webpack-stats.json'
}),
);
return config;
},
};
//https://stackoverflow.com/questions/54241751/django-webpack-loader-not-rendering-react-app-using-react-app-rewired?r=SearchResults
//How do I debug a local typescript module used by an app created from create-react-app
/* config-overrides.js */
const rewireAliases = require("react-app-rewire-aliases");
const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
var path = require("path");
module.exports = function override(config, env) {
config.module.rules.push({
test: /\.ts$/,
use: ["awesome-typescript-loader"],
enforce: "pre"
});
config.resolve.plugins = config.resolve.plugins.filter(plugin => !(plugin instanceof ModuleScopePlugin));
config = rewireAliases.aliasesOptions({
"@common": path.resolve(
__dirname,
`node_modules/my-common-module/src/index.ts`
)
})(config, env);
return config;
};
//https://stackoverflow.com/questions/57605815/how-do-i-debug-a-local-typescript-module-used-by-an-app-created-from-create-reac/57649317?r=SearchResults#57649317
//Create-react-app + react-app-rewired + typescript + antd
const {
getLoader,
injectBabelPlugin
} = require("react-app-rewired");
const tsImportPluginFactory = require('ts-import-plugin')
module.exports = function override(config, env) {
// do stuff with the webpack config...
const tsLoader = getLoader(
config.module.rules,
rule =>
rule.loader &&
typeof rule.loader === 'string' &&
rule.loader.includes('ts-loader')
);
tsLoader.options = {
getCustomTransformers: () => ({
before: [
tsImportPluginFactory([{
libraryDirectory: 'es',
libraryName: 'antd',
style: 'css',
}]),
]
})
};
return config;
};
//https://stackoverflow.com/questions/49698564/create-react-app-react-app-rewired-typescript-antd/50022172?r=SearchResults#50022172
optimization: {
runtimeChunk: {
name: 'manifest'
},
splitChunks: {
maxInitialRequests: 10,
cacheGroups: {
vendor: {
test: /(jquery|fastclick|vue.esm.js)/,
name: 'vendor',
chunks: 'all'
},
common: {
test: /(\.(png|jpe?g|gif|svg))/,
name: 'app',
chunks: 'initial',
minChunks: 10
},
app: {
test: /(css[\\/]style.css)/,
name: 'app',
chunks: 'initial',
minChunks: 1
}
}
}
},
//你可以配置optimization,把你想要抽取的css，js，甚至是公用图片都抽取出来，例如：
//https://segmentfault.com/q/1010000017990233/
