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"
- 文件写在public里面(因为public里面的文件本身就不会被额外处理)
2022-8-8 更新 关于vue3中的使用
- vue3里面为了正确的编译和类型推断可以用一个js与ts进行中转,在js里面引入,在ts里面从js里引入,然后类型定义再进行暴露