webpack-notifer

config/webpack.common.config.js

@@ -1,41 +1,44 @@
-const tsImportPluginFactory = require("ts-import-plugin"); // 按需加载
-const path = require("path");
-const resolve = dir => {
+const tsImportPluginFactory = require('ts-import-plugin'); // 按需加载
+
+const path = require('path');
+const resolve = (dir) => {
   return path.resolve(process.cwd(), dir);
 };
 
 module.exports = {
   entry: {
-    index: "./src/index.tsx",
-    framework: ["react", "react-dom"]
+    index: './src/index.tsx',
+    framework: ['react', 'react-dom'],
   },
   output: {
-    path: path.resolve(__dirname, "../dist"),
-    sourceMapFilename: "[name].map",
-    chunkFilename: "static/js/[name].[chunkhash:8].js",
-    filename: "static/js/[name].[hash:8].js"
+    path: path.resolve(__dirname, '../dist'),
+    sourceMapFilename: '[name].map',
+    chunkFilename: 'static/js/[name].[chunkhash:8].js',
+    filename: 'static/js/[name].[hash:8].js',
   },
+  // stats: 'errors-warnings',
+
   resolve: {
     // 设置别名
     alias: {
-      "@": resolve("src") // 这样配置后 @ 可以指向 src 目录
-    }
+      '@': resolve('src'), // 这样配置后 @ 可以指向 src 目录
+    },
   },
   module: {
     rules: [
       {
         test: /\.(jsx|tsx|js|ts)$/,
-        loader: "ts-loader",
+        loader: 'ts-loader',
         options: {
           transpileOnly: true,
           getCustomTransformers: () => ({
-            before: [tsImportPluginFactory(/** options */)]
+            before: [tsImportPluginFactory(/** options */)],
           }),
           compilerOptions: {
-            module: "es2015"
-          }
+            module: 'es2015',
+          },
         },
-        exclude: /node_modules/
+        exclude: /node_modules/,
       },
       /*{
         test: /\.(j|t)sx?$/,
@@ -75,31 +78,31 @@ module.exports = {
         test: /\.(png|jpe?g|gif|webp)(\?.*)?$/,
         use: [
           {
-            loader: "url-loader",
+            loader: 'url-loader',
             options: {
-              name: "[name].[ext]",
-              outputPath: "images/",
+              name: '[name].[ext]',
+              outputPath: 'images/',
               limit: 4096,
               fallback: {
-                loader: "file-loader",
+                loader: 'file-loader',
                 options: {
-                  name: "img/[name].[hash:8].[ext]"
-                }
-              }
-            }
-          }
-        ]
+                  name: 'img/[name].[hash:8].[ext]',
+                },
+              },
+            },
+          },
+        ],
       },
       {
         test: /\.(eot|ttf|svg|woff|woff2)$/,
         use: {
-          loader: "file-loader",
+          loader: 'file-loader',
           options: {
-            name: "[name]_[hash].[ext]",
-            outputPath: "font/"
-          }
-        }
-      }
-    ]
-  }
+            name: '[name]_[hash].[ext]',
+            outputPath: 'font/',
+          },
+        },
+      },
+    ],
+  },
 };

config/webpack.dev.config.js

@@ -1,6 +1,7 @@
 const path = require('path');
 const merge = require('webpack-merge');
 const common = require('./webpack.common.config.js');
+const FriendlyErrorsWebpackPlugin = require('friendly-errors-webpack-plugin');
 
 const webpack = require('webpack');
 const HtmlWebpackPlugin = require('html-webpack-plugin', null, 2);
@@ -28,6 +29,7 @@ const webpack_config = merge(common, {
     port: 9000,
     compress: true,
     hot: true,
+    quiet: true,
   },
   plugins: [
     new HtmlWebpackPlugin({
@@ -36,6 +38,27 @@ const webpack_config = merge(common, {
       hash: false,
     }),
     new webpack.HotModuleReplacementPlugin(),
+    new FriendlyErrorsWebpackPlugin({
+      // 运行成功
+      compilationSuccessInfo: {
+        messages: ['You application is running here http://localhost:9000'],
+        notes: [
+          'Some additionnal notes to be displayed unpon successful compilation',
+        ],
+      },
+      // 运行错误
+      onErrors: function (severity, errors) {
+        //您可以收听插件转换和优先级的错误
+        //严重性可以是'错误'或'警告'
+      },
+      //是否每次编译之间清除控制台
+      //默认为true
+      clearConsole: true,
+
+      //添加格式化程序和变换器(见下文)
+      additionalFormatters: [],
+      additionalTransformers: [],
+    }),
   ],
 });
 

config/webpack.prod.config.js

@@ -4,32 +4,41 @@
  * @Last Modified by:   Johnhong9527
  * @Last Modified time: 2020-05-12 16:35:44
  */
-const merge = require("webpack-merge");
-const common = require("./webpack.common.config.js");
+const merge = require('webpack-merge');
+const common = require('./webpack.common.config.js');
 
-const HtmlWebpackPlugin = require("html-webpack-plugin");
-const { CleanWebpackPlugin } = require("clean-webpack-plugin");
-const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
-const MiniCssExtractPlugin = require("mini-css-extract-plugin");
-const OptimizeCssAssetsPlugin = require("optimize-css-assets-webpack-plugin");
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const { CleanWebpackPlugin } = require('clean-webpack-plugin');
+const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
+const FriendlyErrorsWebpackPlugin = require('friendly-errors-webpack-plugin');
 
 module.exports = merge(common, {
-  mode: "production",
+  mode: 'production',
+  stats: 'detailed',
   module: {
     rules: [
       {
         test: /\.css$/,
-        use: [MiniCssExtractPlugin.loader, "css-loader", "postcss-loader"]
+        use: [
+          MiniCssExtractPlugin.loader,
+          // 'style-loader',
+          'css-loader',
+          'postcss-loader',
+          'less-loader',
+        ],
       },
       {
         test: /\.less$/,
         use: [
           MiniCssExtractPlugin.loader,
-          "css-loader",
-          "less-loader",
-          "postcss-loader"
-        ]
-      }
+          // 'style-loader',
+          'css-loader',
+          'postcss-loader',
+          'less-loader',
+        ],
+      },
       // {
       //   test: /\.(scss|sass)$/,
       //   use: [
@@ -39,54 +48,56 @@ module.exports = merge(common, {
       //     'sass-loader'
       //   ]
       // },
-    ]
+    ],
   },
   plugins: [
     new HtmlWebpackPlugin({
-      filename: "index.html",
-      template: "public/index.html",
-      inject: "body",
+      filename: 'index.html',
+      template: 'public/index.html',
+      inject: 'body',
       minify: {
         removeComments: true,
-        collapseWhitespace: true
-      }
+        collapseWhitespace: true,
+      },
     }),
     new CleanWebpackPlugin(),
+    new CleanWebpackPlugin(),
+    new FriendlyErrorsWebpackPlugin(),
     new MiniCssExtractPlugin({
-      filename: "css/[name].[hash].css",
-      chunkFilename: "css/[id].[hash].css"
-    })
+      filename: 'css/[name].[hash].css',
+      chunkFilename: 'css/[id].[hash].css',
+    }),
   ],
   optimization: {
     minimizer: [
       new UglifyJsPlugin(),
       new OptimizeCssAssetsPlugin({
         assetNameRegExp: /\.css$/g,
-        cssProcessor: require("cssnano"),
+        cssProcessor: require('cssnano'),
         cssProcessorPluginOptions: {
-          preset: ["default", { discardComments: { removeAll: true } }]
+          preset: ['default', { discardComments: { removeAll: true } }],
         },
-        canPrint: true
-      })
+        canPrint: true,
+      }),
     ],
     splitChunks: {
-      chunks: "all",
+      chunks: 'all',
       minSize: 30000,
       maxSize: 0,
       minChunks: 1,
       cacheGroups: {
         framework: {
-          test: "framework",
-          name: "framework",
-          enforce: true
+          test: 'framework',
+          name: 'framework',
+          enforce: true,
         },
         vendors: {
           priority: -10,
           test: /node_modules/,
-          name: "vendor",
-          enforce: true
-        }
-      }
-    }
-  }
+          name: 'vendor',
+          enforce: true,
+        },
+      },
+    },
+  },
 });

package.json

@@ -35,10 +35,12 @@
     "clean-webpack-plugin": "^3.0.0",
     "css-loader": "^3.5.3",
     "file-loader": "^6.0.0",
+    "friendly-errors-webpack-plugin": "^1.7.0",
     "html-webpack-plugin": "^4.3.0",
     "less": "^3.11.1",
     "less-loader": "^6.1.0",
     "mini-css-extract-plugin": "^0.9.0",
+    "node-notifier": "^7.0.0",
     "optimize-css-assets-webpack-plugin": "^5.0.3",
     "postcss-loader": "^3.0.0",
     "style-loader": "^1.2.1",