如何将一个webpack手脚架工程打包后上传npm

目前，有很多手脚架工程，里面的配置都很成熟，比如VUE的手脚架，简单的几步就能创建好一个工程：

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

但这里配置的工程，一般是用于开发一个web工程。 如果我们想将此工程作为一个插件发布到网上，让用户可以通过npm来安装，应该如何来做呢？

如何你的插件工程非常的简单，连ES6语法都没用到，那么，你可以直接package.json里的 main 配置改成你想开放给其他人用的入口js文件就行了。 

下面的内容，你就不用看了。直接去创建npm账号，通过npm账号npm publish上去就可以了。npm 如何上传网上的文章非常多，这里就不多说了。

注意：因为我们常用淘宝镜像的原因，所以npm publish的时候很有可能就失败了。解决办法如下：

请看我的上一篇博文

npm adduser 报错e409 Conflict

下面我以vue的手脚来解释webpack如何处理。

 首先，我们要知道，在手脚架里，webpack会将js打包成 如下形式：

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

 这种形式的js是无法直接使用引入使用的。

 但想一想，webpack的设计者不可能没有考虑到这种问题，所以我翻看了一下webpack的api文档。

 在这里我找到了原来webpack的打包，可以通过配置进行针对性的打包。

 在output 里面添加library、libraryTarget以及umdNamedDefine 后，你再打包试试，就会发现，这一次打包出来的就不同了。

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

还有最后一个注意点就是，打包出来的路径请以相对路径来打包，否则打包出来的东西路径就有问题了。

另想有想将css文件独立打包的话，请看 https://github.com/wfwfwf/vue-plug-in  （针对element-ui进行补充的插件）

这里包括，如何将css独立打包，如何将js打包成插件。请对比用手脚生成的工程。如果对你有帮助，请点个赞！