配置插件打包npm run plugin

build/plugin.js

@@ -0,0 +1,37 @@
+'use strict'
+require('./check-versions')()
+
+process.env.NODE_ENV = 'plugin'
+
+const ora = require('ora')
+const rm = require('rimraf')
+const path = require('path')
+const chalk = require('chalk')
+const webpack = require('webpack')
+const config = require('../config')
+const webpackConfig = require('./webpack.plugin.conf')
+
+const spinner = ora('building for plugin...')
+spinner.start()
+
+rm(path.join(config.plugin.assetsRoot, config.plugin.assetsSubDirectory), err => {
+  if (err) throw err
+  webpack(webpackConfig, (err, stats) => {
+    spinner.stop()
+    if (err) throw err
+    process.stdout.write(stats.toString({
+      colors: true,
+      modules: false,
+      children: false, // If you are using ts-loader, setting this to true will make TypeScript errors show up during build.
+      chunks: false,
+      chunkModules: false
+    }) + '\n\n')
+
+    if (stats.hasErrors()) {
+      console.log(chalk.red('  Build failed with errors.\n'))
+      process.exit(1)
+    }
+
+    console.log(chalk.cyan('  Build complete.\n'))
+  })
+})

build/utils.js

@@ -5,9 +5,12 @@ const ExtractTextPlugin = require('extract-text-webpack-plugin')
 const packageConfig = require('../package.json')
 
 exports.assetsPath = function (_path) {
-  const assetsSubDirectory = process.env.NODE_ENV === 'production'
-    ? config.build.assetsSubDirectory
-    : config.dev.assetsSubDirectory
+  const obj = {
+    'production': config.build.assetsSubDirectory,
+    'development': config.dev.assetsSubDirectory,
+    'plugin': config.plugin.assetsSubDirectory    
+  }
+  const assetsSubDirectory = obj[process.env.NODE_ENV]
 
   return path.posix.join(assetsSubDirectory, _path)
 }

build/vue-loader.conf.js

@@ -1,10 +1,13 @@
 'use strict'
 const utils = require('./utils')
 const config = require('../config')
-const isProduction = process.env.NODE_ENV === 'production'
-const sourceMapEnabled = isProduction
-  ? config.build.productionSourceMap
-  : config.dev.cssSourceMap
+const _obj = {
+  'production': config.build.productionSourceMap,
+  'development': config.dev.productionSourceMap,
+  'plugin': config.plugin.productionSourceMap    
+}
+const isProduction = process.env.NODE_ENV === 'production' || process.env.NODE_ENV === 'plugin'
+const sourceMapEnabled = _obj[process.env.NODE_ENV]
 
 module.exports = {
   loaders: utils.cssLoaders({

build/webpack.base.conf.js

@@ -18,7 +18,11 @@ const createLintingRule = () => ({
     emitWarning: !config.dev.showEslintErrorsInOverlay
   }
 })
-
+const _obj = {
+  'production': config.build.assetsPublicPath,
+  'development': config.dev.assetsPublicPath,
+  'plugin': config.plugin.assetsPublicPath    
+}
 module.exports = {
   context: path.resolve(__dirname, '../'),
   entry: {
@@ -27,9 +31,7 @@ module.exports = {
   output: {
     path: config.build.assetsRoot,
     filename: '[name].js',
-    publicPath: process.env.NODE_ENV === 'production'
-      ? config.build.assetsPublicPath
-      : config.dev.assetsPublicPath
+    publicPath: _obj[process.env.NODE_ENV]
   },
   resolve: {
     extensions: ['.js', '.vue', '.json'],

build/webpack.plugin.conf.js

@@ -0,0 +1,96 @@
+'use strict'
+const path = require('path')
+const utils = require('./utils')
+const webpack = require('webpack')
+const config = require('../config')
+const merge = require('webpack-merge')
+const baseWebpackConfig = require('./webpack.base.conf')
+const CopyWebpackPlugin = require('copy-webpack-plugin')
+const ExtractTextPlugin = require('extract-text-webpack-plugin')
+const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
+const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
+
+const env = 'plugin'
+
+const webpackConfig = merge(baseWebpackConfig, {
+  module: {
+    rules: utils.styleLoaders({
+      sourceMap: false,
+      extract: true,
+      usePostCSS: true
+    })
+  },
+  devtool: false,
+  entry: './assets/js/vendor/dialog.js',
+  output: {
+    path: path.resolve(__dirname, '../plugin/dist/static'),
+    filename: 'js/vue.dialog.js',
+    libraryTarget: 'umd'
+  },
+  plugins: [
+    // http://vuejs.github.io/vue-loader/en/workflow/production.html
+    new webpack.DefinePlugin({
+      'process.env': env
+    }),
+    new UglifyJsPlugin({
+      uglifyOptions: {
+        compress: {
+          warnings: false
+        }
+      },
+      sourceMap: config.plugin.productionSourceMap,
+      parallel: true
+    }),
+    // extract css into its own file
+    new ExtractTextPlugin({
+      filename: utils.assetsPath('css/dialog.min.css'),
+      // Setting the following option to `false` will not extract CSS from codesplit chunks.
+      // Their CSS will instead be inserted dynamically with style-loader when the codesplit chunk has been loaded by webpack.
+      // It's currently set to `true` because we are seeing that sourcemaps are included in the codesplit bundle as well when it's `false`, 
+      // increasing file size: https://github.com/vuejs-templates/webpack/issues/1110
+      allChunks: true,
+    }),
+    // Compress extracted CSS. We are using this plugin so that possible
+    // duplicated CSS from different components can be deduped.
+    new OptimizeCSSPlugin({
+      cssProcessorOptions: config.plugin.productionSourceMap
+        ? { safe: true, map: { inline: false } }
+        : { safe: true }
+    }),
+    // enable scope hoisting
+    new webpack.optimize.ModuleConcatenationPlugin(),
+    // copy custom static assets
+    new CopyWebpackPlugin([
+      {
+        from: path.resolve(__dirname, '../static'),
+        to: config.plugin.assetsSubDirectory,
+        ignore: ['.*']
+      }
+    ])
+  ]
+})
+
+if (config.plugin.productionGzip) {
+  const CompressionWebpackPlugin = require('compression-webpack-plugin')
+
+  webpackConfig.plugins.push(
+    new CompressionWebpackPlugin({
+      asset: '[path].gz[query]',
+      algorithm: 'gzip',
+      test: new RegExp(
+        '\\.(' +
+        config.build.productionGzipExtensions.join('|') +
+        ')$'
+      ),
+      threshold: 10240,
+      minRatio: 0.8
+    })
+  )
+}
+
+if (config.plugin.bundleAnalyzerReport) {
+  const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
+  webpackConfig.plugins.push(new BundleAnalyzerPlugin())
+}
+
+module.exports = webpackConfig

config/index.js

@@ -67,6 +67,30 @@ module.exports = {
     productionGzip: false,
     productionGzipExtensions: ['js', 'css'],
 
+    // Run the build command with an extra argument to
+    // View the bundle analyzer report after build finishes:
+    // `npm run build --report`
+    // Set to `true` or `false` to always turn it on or off
+    bundleAnalyzerReport: process.env.npm_config_report
+  },
+
+  plugin: {
+    // Paths
+    assetsRoot: path.resolve(__dirname, '../plugin/dist'),
+    assetsSubDirectory: '',
+    /**
+     * Source Maps
+     */
+    productionSourceMap: false,
+    // https://webpack.js.org/configuration/devtool/#production
+    devtool: '#source-map',
+    // Gzip off by default as many popular static hosts such as
+    // Surge or Netlify already gzip all static assets for you.
+    // Before setting to `true`, make sure to:
+    // npm install --save-dev compression-webpack-plugin
+    productionGzip: false,
+    productionGzipExtensions: ['js', 'css'],
+
     // Run the build command with an extra argument to
     // View the bundle analyzer report after build finishes:
     // `npm run build --report`

config/plugin.env.js

@@ -0,0 +1,4 @@
+'use strict'
+module.exports = {
+  NODE_ENV: '"plugin"'
+}

package.json

@@ -11,7 +11,8 @@
     "e2e": "node test/e2e/runner.js",
     "test": "npm run unit && npm run e2e",
     "lint": "eslint --ext .js,.vue src test/unit test/e2e/specs",
-    "build": "node build/build.js"
+    "build": "node build/build.js",
+    "plugin": "node build/plugin.js"
   },
   "dependencies": {
     "vue": "^2.5.2",