yarn eject
常见的配置修改
- 把sass改为less
yarn add less less-loader@8
yarn remove sass-loader
config\webpack.config.js
const lessRegex = /\.less$/
const lessModuleRegex = /\.module\.less$/
{
test: lessRegex,
exclude: lessModuleRegex,
use: getStyleLoaders(
{
importLoaders: 3,
sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment,
modules: {
mode: 'icss',
},
},
'less-loader'
),
// Don't consider CSS imports dead code even if the
// containing package claims to have no side effects.
// Remove this when webpack adds a warning or an error for this.
// See https://github.com/webpack/webpack/issues/6571
sideEffects: true,
},
{
test: lessModuleRegex,
use: getStyleLoaders(
{
importLoaders: 3,
sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment,
modules: {
mode: 'local',
getLocalIdent: getCSSModuleLocalIdent,
},
},
'less-loader'
),
},
- 配置别名
- 修改域名和端口号
4. 修改浏览器兼容
5. 处理跨域
yarn add http-proxy-middleware
src\setupProxy.js
const { createProxyMiddleware } = require('http-proxy-middleware')
module.exports = function (app) {
app.use(
createProxyMiddleware('/jian', {
target: 'https://www.jianshu.com/asimov',
changeOrigin: true,
ws: true,
pathRewrite: { '^/jian': '' },
})
)
app.use(
createProxyMiddleware('/zhi', {
target: 'https://news-at.zhihu.com/api/4',
changeOrigin: true,
ws: true,
pathRewrite: { '^/zhi': '' },
})
)
}
- 测试
src/index.js
const root = ReactDOM.createRoot(document.getElementById('root'))
root.render(
// React 严格语法模式 React.StrictMode 和 use strict 不一样
<>111 </>
)
fetch('/jian/subscriptions/recommended_collections')
.then((response) => response.json())
.then((value) => {
console.log(value)
})
package.json 里面增添 proxy:""，但是只能单一代理
