other
How To Debug Craco/Webpack
通过 node 的 inspect-brk 参数启动后,node 会自动断点断在 webpack 入口的第一行。这时打开 Chrome,随便一个页面打开 devTools,在左上角会出现一个绿色的 Node.JS 图标(在切换手机显示模式按钮的右边),点击后就会自动连接到 node 的 debug,然后进 source 标签下单步执行就行了 // mac node --inspect-brk ./node_modules/.bin/craco build // windows node --inspect-brk ./node_modules/@craco/craco/dist/bin/craco.js build
craco 修改 output.path
https://github.com/dilanx/craco/issues/104 paths.appBuild = webpackConfig.output.path = path.resolve('custom-build-dir');
customize-cra
customize-cra 真tm坑啊,less-loader,postcss-loader等版本不同容易报错,配置不兼容问题很多
addLessLoader({
lessOptions: {
javascriptEnabled: true,
},
}),
adjustStyleLoaders(({ use: [, , postcss] }) => {
const postcssOptions = postcss.options;
postcss.options = { postcssOptions };
}),
cra
cra 禁用自动刷新
REACT_APP_DISABLE_LIVE_RELOAD=true
manifest
asset-manifest.json
a json file containing the paths of all generated assets https://github.com/facebook/create-react-app/issues/6436 微前端 https://github.com/AbhiAgarwal192/MicrofrontEnd WordPress
manifest.json
pwa
precache-manifest.js
A precache manifest provides an exact representation of the expected cache state https://web.dev/precache-with-workbox/ Service Worker
react-scripts
react-scripts 2.1.8 会使用new WorkboxWebpackPlugin.GenerateSW 生成service-worker.js