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
Webpack vue.js
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.

Previous: The introduction of html-webpack-plugin, nesting into html, cannot be parsed

Next: Vue: style judges two at the same time.

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1eac31b-47e9a.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1eac31b-47e9a.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?