Vue插件打包与发布的方法示例

npm init -y

vue init webpack-simple

{
 "name": "dialog",
 "description": "the dialog plguin",
 "version": "1.0.0",
 "author": "TerryZ <terry5@foxmail.com>",
 "license": "MIT",
 //删除原有的"priveate": true，发布到公共库的项目，不能设置该参数
 //增加 main 配置，设置插件在安装后的主入口文件
 "main": "dist/dialog.js",
 "scripts": {
  "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
  "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
 },
 "dependencies": {
  "vue": "^2.5.11"
 },
 //增加插件关键字描述，非必须，按需设置
 "keywords": [
  "front-end",
  "javascript",
  "dialog",
  "vue",
  "vuejs"
 ],
 "browserslist": [
  "> 1%",
  "last 2 versions",
  "not ie <= 8"
 ],
 "devDependencies": {
  "babel-core": "^6.26.0",
  "babel-loader": "^7.1.2",
  "babel-preset-env": "^1.6.0",
  "babel-preset-stage-3": "^6.24.1",
  "cross-env": "^5.0.5",
  "css-loader": "^0.28.7",
  "file-loader": "^1.1.4",
  "node-sass": "^4.5.3",
  "sass-loader": "^6.0.6",
  "vue-loader": "^13.0.5",
  "vue-template-compiler": "^2.4.4",
  "webpack": "^3.6.0",
  "webpack-dev-server": "^2.9.1"
 }
}

output: {
  path: path.resolve(__dirname, './dist'),
  publicPath: '/dist/',
  //修改输出打包后的脚本文件名，该文件即是 package.json 中配置的 main 属性的对应文件
  filename: 'dialog.js',
  //增加以下库配置信息
  library: 'Dialog',
  libraryTarget: 'umd',
  umdNamedDefine: true
}

npm install -g cnpm --registry=https://registry.npm.taobao.org

npm run build

npm publish

npm i url-loader --save-dev

module.exports = {
 ...
 module: {
  rules: [
   {...},
   {
    test: /\.(png|jpg|gif|svg)$/,
    loader: 'url-loader',
    options: {
     limit: 30000,
     name: '[name].[ext]"htmlcode">

npm run build


会发现编译到 dist 目录中的内容已经没有图片文件，只有编译完成的 build.js 和对应的 map 文件，所以在插件开发时，尽可能使用 CSS 处理样式，需要使用到图片或图标资源，尽可能也使用图片尺寸小的图片，方便打包处理


以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。