添加组件打包脚本

build/webpack.pack.js

@@ -0,0 +1,108 @@
+'use strict'
+const path = require('path')
+const chalk = require('chalk')
+const webpack = require('webpack')
+const VueLoaderPlugin = require('vue-loader/lib/plugin')
+const MiniCssExtractPlugin = require('mini-css-extract-plugin')
+const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')
+
+const options = {
+  mode: 'production',
+  entry: path.resolve(__dirname, '../examples/components/demo-block/index.js'),
+  output: {
+    path: path.resolve(__dirname, '../dist'),
+    filename: 'index.js',
+    publicPath: './',
+    library: 'DemoBlock', // 定义导出到变量
+    libraryExport: 'default', // 定义导出指定属性
+    libraryTarget: 'umd',
+    umdNamedDefine: true, // libraryTarget: "umd"
+    globalObject: 'typeof self !== \'undefined\' ? self : this' // https://github.com/webpack/webpack/issues/6522
+  },
+  externals: {
+    vue: {
+      commonjs: 'vue',
+      commonjs2: 'vue',
+      amd: 'vue',
+      root: 'Vue'
+    }
+  },
+  resolve: {
+    symlinks: false,
+    extensions: ['.vue', '.js', '.json'],
+    alias: {
+      'vue$': 'vue/dist/vue.esm.js'
+    }
+  },
+  module: {
+    rules: [
+      {
+        test: /\.vue$/,
+        loader: 'vue-loader'
+      },
+      {
+        test: /\.js$/,
+        exclude: /(node_modules)/,
+        use: {
+          loader: 'babel-loader',
+          options: {
+            presets: ['@babel/preset-env'],
+            plugins: ['@babel/plugin-transform-runtime']
+          }
+        }
+      },
+      {
+        test: /\.css$/,
+        use: [
+          {
+            loader: MiniCssExtractPlugin.loader,
+            options: {
+              // you can specify a publicPath here
+              // by default it uses publicPath in webpackOptions.output
+              // publicPath: '../',
+              hmr: process.env.NODE_ENV === 'development'
+            }
+          },
+          // 'vue-style-loader',
+          'css-loader'
+        ]
+      }
+    ]
+  },
+  plugins: [
+    new webpack.DefinePlugin({
+      'process.env': {
+        NODE_ENV: process.env.NODE_ENV || '"development"'
+      }
+    }),
+    new VueLoaderPlugin(),
+    new MiniCssExtractPlugin({
+      filename: 'css/default.css'
+    })
+  ],
+  optimization: {
+    minimizer: [new OptimizeCSSAssetsPlugin({})]
+  }
+}
+
+const compiler = webpack(options)
+
+compiler.run((err, stats) => {
+  if (err) throw err
+  process.stdout.write(stats.toString({
+    colors: true,
+    modules: false,
+    children: false,
+    chunks: false,
+    chunkModules: false
+  }) + '\n\n')
+
+  if (stats.hasErrors()) {
+    console.log(chalk.red('  Build failed with errors.\n'))
+    process.exit(1)
+  }
+
+  const dist = require('../dist')
+
+  console.log('dist:', dist)
+})

package.json

@@ -6,7 +6,7 @@
   "scripts": {
     "build": "rollup -c --environment NODE_ENV:production",
     "build:docs": "webpack --progress --colors",
-    "build:comp": "webpack --progress --colors --config component.config.js",
+    "build:comp": "node build/webpack.pack.js",
     "dev": "rollup -c -w --environment NODE_ENV:development",
     "serve": "webpack-dev-server --progress --colors",
     "serve:docs": "dev serve -d docs -o -p 3000",
@@ -47,6 +47,8 @@
     "github-markdown-css": "^3.0.1",
     "html-webpack-plugin": "^3.2.0",
     "jest": "^24.5.0",
+    "mini-css-extract-plugin": "^0.8.0",
+    "optimize-css-assets-webpack-plugin": "^5.0.3",
     "rollup": "^1.23.1",
     "rollup-plugin-babel": "^4.3.3",
     "rollup-plugin-commonjs": "^10.1.0",

webpack.config.js

@@ -9,7 +9,6 @@ module.exports = {
   output: {
     path: path.resolve(__dirname, 'docs'),
     filename: 'index.js',
-    // libraryTarget: 'umd',
     publicPath: './'
   },
   resolve: {