vue webpack配置打包独立js文件

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

• 经过网络搜索后，有以下几个方案

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

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

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

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

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

• 个人倾向于external的用法

  此方案样例代码可 在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里引入，然后类型定义再进行暴露

转载请注明出处@https://www.cnblogs.com/noah227/p/15512859.html