12

build/webpack.base.conf.js

@@ -3,14 +3,21 @@ const config = require('../package.json');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const VueLoaderPlugin = require('vue-loader/lib/plugin');
 const moment = require('moment');
+const ProgressBarPlugin = require('progress-bar-webpack-plugin');
+var WebpackBuildNotifierPlugin = require('webpack-build-notifier');
 const isDev = process.env.NODE_ENV === 'development';
 var test = process.env.NODE_ENV === 'test';
 const path = require('path');
+const HappyPack = require('happypack');
+const os = require('os');
+const chalk= require('chalk');
+const happyThreadPool = HappyPack.ThreadPool({ size: os.cpus().length });
 module.exports = {
     stats: {
         entrypoints: false,
         children: false
     },
+    stats: 'errors-only',
     resolve: {
         extensions: ['.js', '.vue', '.json'],
         alias: {
@@ -22,6 +29,7 @@ module.exports = {
             !test ? {
                 test: /\.(sa|sc|c)ss$/,
                 use: [
+                    'cache-loader',
                     isDev ? 'style-loader' : MiniCssExtractPlugin.loader,
                     'css-loader',
                     'postcss-loader',
@@ -40,6 +48,7 @@ module.exports = {
             {
                 test: /\.vue$/,
                 use: [
+                    'cache-loader',
                     {
                         loader: 'vue-loader',
                         options: {
@@ -63,9 +72,7 @@ module.exports = {
             {
                 test: /\.js$/,
                 exclude: /node_modules/,
-                use: {
-                    loader: 'babel-loader'
-                }
+                use: ['happypack/loader?id=Babel']
             }, 
             {
                 test: /\.(png|jpg|gif|webp)$/,
@@ -82,6 +89,27 @@ module.exports = {
 (c) 2017-2018 JDC
 Released under the MIT License.`
         }),
-        new VueLoaderPlugin()
+        new HappyPack({
+            //用id来标识 happypack处理那里类文件
+          id: 'Babel',
+          //如何处理  用法和loader 的配置一样
+          loaders: [{
+            loader: 'babel-loader?cacheDirectory=true',
+          }],
+          //共享进程池
+          threadPool: happyThreadPool,
+          //允许 HappyPack 输出日志
+          verbose: false,
+        }),       
+        new VueLoaderPlugin(),
+        new ProgressBarPlugin({
+            format: '  build [:bar] ' + chalk.green.bold(':percent') + ' (:elapsed seconds)',      
+            clear: false, 
+            width: 100
+          }),
+          new WebpackBuildNotifierPlugin({
+            title: "My Project Webpack Build",        
+            suppressSuccess: true
+          })
     ],
 }

build/webpack.demo.base.conf.js

@@ -18,7 +18,7 @@ module.exports = merge(webpackBaseConf, {
         path: path.resolve(__dirname, '../dist/sites/'),
         chunkFilename: 'demo/js/[name].[hash:5].js',
         filename: isDev ? 'demo/js/[name].js' : 'demo/js/[name].[hash].js'
-    },
+    },    
     module: {
         rules: [
             //自定义主题

build/webpack.demo.dev.conf.js

@@ -27,6 +27,7 @@ module.exports = merge(baseConf, {
         contentBase: path.resolve(__dirname, 'dist/sites/'),
         index: 'demo.html',
         compress: true,
+        noInfo: true,      
         historyApiFallback: true,
         disableHostCheck: true
     }

package.json

@@ -14,7 +14,7 @@
   "scripts": {
     "dev": "npm run dev:demo",
     "dev:carefree": "cross-env NODE_ENV=carefree carefree_env=dev webpack -w --colors --progress --config build/webpack.demo.dev.conf.js",
-    "dev:demo": "cross-env NODE_ENV=development webpack-dev-server -d --open --progress --config build/webpack.demo.dev.conf.js",
+    "dev:demo": "cross-env NODE_ENV=development webpack-dev-server -d --open  --config build/webpack.demo.dev.conf.js",
     "dev:doc": "cross-env NODE_ENV=development DOC_TYPE=true webpack-dev-server -d --open -w --progress --config build/webpack.doc.dev.conf.js",
     "build:demo": "cross-env NODE_ENV=production webpack --hide-modules --progress --config build/webpack.demo.build.conf.js",
     "build:doc": "cross-env NODE_ENV=production DOC_TYPE=true webpack --hide-modules --progress --config build/webpack.doc.build.conf.js",
@@ -48,7 +48,12 @@
   "dependencies": {
     "@babel/polyfill": "7.0.0",
     "@babel/runtime": "7.1.2",
-    "intersection-observer": "^0.5.1"
+    "cache-loader": "^4.1.0",
+    "happypack": "^5.0.1",
+    "intersection-observer": "^0.5.1",
+    "os": "^0.1.1",
+    "progress-bar-webpack-plugin": "^1.12.1",
+    "webpack-build-notifier": "^1.1.1"
   },
   "peerDependencies": {
     "vue": "^2.6.10"
@@ -73,7 +78,7 @@
     "babel-plugin-transform-es2015-modules-commonjs": "6.26.2",
     "babel-preset-env": "1.7.0",
     "babel-preset-stage-2": "6.24.1",
-    "chalk": "2.4.1",
+    "chalk": "^2.4.2",
     "chokidar": "^2.0.4",
     "clipboard": "2.0.1",
     "copy": "0.3.2",

src/packages/dialog/demo.vue

@@ -71,7 +71,8 @@
       </nut-cell>
     </div>
     <!-- 以标签形式调用Dialog -->
-    <nut-dialog title="标签形式调用" :visible="dialogShow" @ok-btn-click="dialogShow=false" @cancel-btn-click="dialogShow=false" @close="dialogShow=false">
+    <nut-dialog title="标签形式调用" :visible="dialogShow" :cancelAutoClose="false" @ok-btn-click="dialogShow=false" @cancel-btn-click="dialogShow=false" @close="dialogShow=false">
+      
       <a href="javascript:;" @click="dialogShow=false" :noCancelBtn="true">点我可以直接关闭对话框</a>
     </nut-dialog>
   </div>

src/packages/dialog/dialog.vue

@@ -195,6 +195,7 @@ export default {
       }
     },
     cancelBtnClick(autoClose) {
+      debugger
       this.$emit("cancel-btn-click");
       if (typeof this.onCancelBtn === "function") {
         if (this.onCancelBtn.call(this) === false) return;