After webpack packaged several businesses in my vue project into xxx.xxx.js, how to refer to it in the new Vue project

problem description

webpackJS 

the environmental background of the problems and what methods you have tried

 study.xxx.js js  commonjs
;:"webpackJsonp" is not defined 
:index.htmlwebpackjsonpxxx.xxx.js;VUE html
 webpackjsonP;commonjs webpackjsonpcommonjs

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" 
     
     

this blog https://www.cnblogs.com/bilib.

I looked at it and thought that what I typed should be a plug-in or something, and I should use a reference like a plug-in.

in the entry file main.js

require("./libs/common")

the result is the same common format error

clipboard.png

what result do you expect? What is the error message actually seen?

what exactly is the file packaged by 1:webpack? Plug-in? Library?

question 2: can the packaged file of webpack be used as a sdk?

question 3: how to use the correct way to use it?

question 4: should I use webpack.library?

question 5: can packaged packages be used in html?

cannot be used in vue
Mar.30,2021

for your last question:

  1. webpack can be packaged in many ways, either a bundle (a file mixed with a bunch of JS code) or a library (with a clear global name like jQuery, etc.). Note that the bundle and library here are just for ease of understanding, not accurate. It is recommended that you take a look at the compiled file of webpack for a deeper understanding.
  2. is fine, but a more accurate description would be a library (a library like jQuery). (library) can be set through the target property of webpack.
  3. for example, if you have packaged a library (like jQuery or a UI library), just copy the library to the project you want to reference, whether require or direct script src (needs to be packaged into a umd module).
  4. Yes.
  5. depends on the output specification of your module, whether it is CommonJS,CMD,AMD or UMD.
< hr >

finally, to sum up, what you call sdk is actually a library. This library should be maintained separately, just as jQuery is a warehouse and Bootstrap is a warehouse. The output js files of these two repositories are compiled separately, not together. So your library should not be compiled in the same set of webpack configurations as the project. Should be stored separately, after the sdk compilation, the compiled files will be put into the need to use the project to reference. You can refer to the source code of some libraries based on webpack build tools, such as ant-design,element-ui, and so on.

of course, it's not that webpack can't compile two pieces of code in the same project at the same time. It's just that it would be very difficult to maintain.

Menu