iT邦幫忙

0

如何由react-app-rewired 設定config-overrides.js來產生bundle.js?

  • 分享至 

  • xImage

已經在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,...

圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友回答

立即登入回答