webpack 把我将自己vue工程中的多个业务.js 打包成xxx.xxx.js 后， 在新的Vue项目中该如何引用

Question

问题描述

webpack将多个JS 打包，作为一个库来使用，该怎么在其他项目中引用

问题出现的环境背景及自己尝试过哪些方法

生成了 一个study.xxx.js 这个是我将多个js文件一起打包的   commonjs是提取的公用方法。
我将生成的包拉进了一个新工程里；在新工程引用了这个文件。但当我使用其中的方法时报错：'webpackJsonp' is not defined 。
网络上很多人都是发布的时候报错：其实是index.html中引用顺序的问题，先引用webpackjsonp的定义，才能再引用用xxx.xxx.js；而我的是在VUE项目中 而且是编译之前不存在html。
这个错误原因就是 webpackjsonP未定义；后来我发现公用方法commonjs中定义了 webpackjsonp。我又将commonjs引入

import './libs/common'
import s from './libs/study.37510244c0489513ba21'
export default {
  name: 'App',
  mounted () {
    s.sleep()
  }
}

是当我编译的时候却是 commonjs内容格式错误。

  ✘  http://eslint.org/docs/rules/key-spacing  
     src/libs/common.js:1:379
     Missing space before value for key 'i' 
     
     

这篇blog https://www.cnblogs.com/bilib... 

我看了一下，觉得我打成的应该是插件之类的，应该用插件之类的引用方式，

在入口文件 main.js 中

require('./libs/common')

结果还是一样common格式错误

你期待的结果是什么？实际看到的错误信息又是什么？

问题1：webpack打包之后的文件到底是个什么？插件？库？

问题2： webpack打包之后的文件可以作为一个sdk使用吗？

问题3： 正确的使用方式改怎么用？

问题4： 应该用webpack.library吗 ？

问题5： 难道打成的包这能在html中使用？vue中不能用

Answer 1

针对你末尾的问题：

1. webpack 的打包方式有很多种，既可以是一个 bundle（混合了一堆JS代码的文件）也可以是一个 library（类似 jQuery 这样有明确的全局命名等），注意这里的 bundle 和 library 只是为了方便理解而说的，并不精确。建议你看一下 webpack 编译后的文件，会有更深的理解。
2. 可以，但是更准确的描述应该是一个 library （类似 jQuery 这样的库）。通过 webpack 的 target 属性可以进行设置（library）。
3. 比如你打包出来了一个 library（类似 jQuery 或者一个 UI 库），那么直接把 library 复制到你想引用的项目里去引用就行了，不管是 require 还是直接 script src（需要打包成 umd 模块）。
4. 对。
5. 取决于你模块的输出规范，是 CommonJS，CMD，AMD 还是 UMD（通用）。

---

最后总结一下，你所说的 sdk 实际上就是一个库。而这个库应该单独拿出来维护，就像 jQuery 是一个仓库，Bootstrap 是一个仓库，这两个仓库的输出的 js 文件，都是单独编译的，而不是放在一起编译。所以你的库不应该和项目放在同一套 webpack 配置下去编译。应该分开存放，sdk 编译完以后，将编译后的文件放到需要使用的项目中去引用。可以参考一些基于 webpack 构建工具的库的源码，比如 ant-design，element-ui 等等。

当然，并不是 webpack 做不到在一个项目中同时编译两份代码。只是这样做会非常不好维护。