vue webpack配置打包獨立js文件

獨立打包js文件，方便發布后快捷修改

• 經過網絡搜索后，有以下幾個方案

  • 配置獨立entry
    倒是有單獨打包了，不過被壓縮了

  • webpack不混淆、不壓縮指定js文件
    通過配置 loader 確實實現了js文件的獨立打包，但是，在文件里直接import或者require返回的都是路徑

  • 來自segmentfault的回答
    通過public/index文件全局掛載

  • 來自知乎的回答
    掛載到window上，跟上面的回答沒有太大區別

  總而言之，就是要實現 runtime 有效

• 個人傾向於external的用法

  • 文件寫在public里面（因為public里面的文件本身就不會被額外處理）

    - public
      - config.js
      - index.html
    

    // config.js
    webConfig123 = {port: 8080}
    

  • 在public/index.html通過script標簽注入js
  • 在webpack的配置里配置externals:

    configureWebpack{
      externals: {
        webConfig: "webConfig123"
      }
    }
    

    }
  • 然后正常引用就可以了

    import webConfig from "webConfig"
    

2022-8-8 更新 關於vue3中的使用

• vue3里面為了正確的編譯和類型推斷可以用一個js與ts進行中轉，在js里面引入，在ts里面從js里引入，然后類型定義再進行暴露