已經在package.json中設定react-app-rewired取代react-scripts:
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test",
"eject": "react-app-rewired eject"
},
用npm run build建立了包含build/static/{css,js,media}的production環境.
但沒有產生development mode下的build/static/js/bundle.js. 請問要怎麼設定config-overrides.js來產生永久的bundle.js(或自設定的檔名)?
20221114T2309
我剛使用的這個設定,
module.exports = function override(config, env) {
config.output.filename = "bundle.js";
return config;
};
就可以替換webpack.config.js預設的filename設定:
output: {
...
filename: isEnvProduction
? 'static/js/[name].[contenthash:8].js'
: isEnvDevelopment && 'static/js/bundle.js',
...
}
並產生了bundle.js, 用serve -s build測試可正常開啟網頁, 就這樣嗎?
20221120T2148
經過幾番折騰, config-overrides.js很麻煩, 管理麻煩, 因此已不用create-react-app, 也不用react-app-rewired了, 而是以npm init開始從頭建立react, 並用自建webpack的config來管理webpack, 參考https://createapp.dev/webpack/react--babel--bootstrap--css--png--prettier--react-hot-loader--sass--svg--typescript 或用bash寫一個create-react-app.sh, 一個腳本直接整合webpack, babel, eslint, prettier, Typescript, ReactJS,...