How to package a webpack scaffolding project and upload it to npm

At present, there are many scaffolding projects with mature configurations, such as the scaffolding of VUE. A project can be created in a few simple steps:

$ npm install -g vue-cli
$ vue init webpack my-project
$ cd my-project
$ npm install
$ npm run dev

But the project configured here is generally used to develop a web project. If we want to publish this project as a plug-in on the Internet, so that users can install it through npm, how should we do it?

How your plug-in project is very simple, even ES6 syntax is not used, then you can directly change the main configuration in package.json to the entry js file you want to open to others. 

You don't need to read the following content. Go directly to create an npm account, and go up through the npm account npm publish. There are a lot of articles on how npm uploads online, so I won't go into details here.

Note : Because we often use Taobao mirrors, it is very likely that npm publish will fail. The solution is as follows:

Please see my last blog post

npm adduser reports error e409 Conflict

Below I use vue's hands and feet to explain how webpack handles it.

 First of all, we need to know that in the scaffolding, webpack will package js into the following form:

webpackJsonp([0],{"++mS":function(n,t){var e=!1;try{var i=Object.defineProperty({},.....

 This form of js cannot be imported directly.

 But think about it, it is impossible for the designers of webpack to not consider this kind of problem, so I looked at the api documentation of webpack.

 Here I found the packaging of the original webpack, which can be packaged in a targeted manner through configuration.

 After adding library, libraryTarget and umdNamedDefine in the output, you will try to package it again, and you will find that the packaged package is different this time.

output: {
    path: config.plug.assetsRoot,
    filename: utils.assetsPath('js/[name].js'),
    chunkFilename: utils.assetsPath('js/[id].js'),
    library: 'todayVuePlugIn',
    libraryTarget: 'umd',
    umdNamedDefine: true
  },

One last point to note is that the packaged path should be packaged with a relative path, otherwise there will be problems with the packaged path.

If you want to package css files independently, please see https://github.com/wfwfwf/vue-plug-in (plug-in for element-ui)

This includes, how to package CSS independently and how to package js into plugins. Please compare the project generated by hand and foot. If it was helpful to you, please give it a thumbs up!