vue webpack配置打包独立js文件

独立打包js文件，方便发布后快捷修改

经过网络搜索后，有以下几个方案（可点开详细查看）

• 配置独立entry
  倒是有单独打包了，不过被压缩了

• webpack不混淆、不压缩指定js文件
  通过配置 loader 确实实现了js文件的独立打包，但是，在文件里直接import或者require返回的都是路径

• 来自segmentfault的回答
  通过public/index文件全局挂载

• 来自知乎的回答
  挂载到window上，跟上面的回答没有太大区别

总而言之，就是要实现 runtime 有效

---

个人倾向于externals的用法

此方案样例代码可 在git上查看

• 文件写在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里引入，然后类型定义再进行暴露

后续补充

• 注意：这种静态文件是会被浏览器缓存的，即会出现做了修改但是客户端没有加载最新版本的情况。
  • 解决方案：因为静态文件实在index.html中通过script标签加载的，所以只需要在加载src中加个参数即可触发更新。
    可以在vue.config.js中暴露一个变量（比如与版本号绑定），利用webpack插值注入机制（和 <%= BASE_URL %> 一个道理）即可。
  • 更多信息可以参见 在客户端侧代码中使用环境变量