build(npm): 升级依赖版本，解决一些版本兼容性问题

Author: cklwblove

build/dll-build.js

@@ -1,30 +1,30 @@
-const path = require('path');
-const utils = require('./utils');
-const webpack = require('webpack');
-const chalk = require('chalk');
-const CleanWebpackPlugin = require('clean-webpack-plugin');
-const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
+const path = require("path");
+const webpack = require("webpack");
+const chalk = require("chalk");
+const utils = require("./utils");
+const { CleanWebpackPlugin } = require("clean-webpack-plugin");
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
 
 // dll文件存放的目录
-const dllPath = '../public/vendor';
+const dllPath = "../public/vendor";
 
 const dllConf = {
-  mode: 'production',
+  mode: "production",
   entry: {
     // 需要提取的库文件
-    element: ['element-ui', 'element-ui/lib/theme-chalk/index.css'],
-    axios: ['axios'],
-    vendor: ['vue', 'vue-router', 'vuex', 'normalize.css']
+    element: ["element-ui", "element-ui/lib/theme-chalk/index.css"],
+    axios: ["axios"],
+    vendor: ["vue", "vue-router", "vuex", "normalize.css"]
   },
   module: {
     rules: [
       {
         test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
-        loader: 'url-loader',
+        loader: "url-loader",
         options: {
           limit: 10000,
-          name: '[name].[hash:7].[ext]'
+          name: "[name].[hash:7].[ext]"
         }
       },
       ...utils.styleLoaders({
@@ -36,10 +36,10 @@ const dllConf = {
   },
   output: {
     path: path.join(__dirname, dllPath),
-    filename: '[name].dll.js',
+    filename: "[name].dll.js",
     // vendor.dll.js中暴露出的全局变量名
     // 保持与 webpack.DllPlugin 中名称一致
-    library: '[name]_[hash]'
+    library: "[name]_[hash]"
   },
   optimization: {
     minimizer: [
@@ -53,43 +53,45 @@ const dllConf = {
     new CleanWebpackPlugin(),
     // 设置环境变量
     new webpack.DefinePlugin({
-      'process.env': {
-        NODE_ENV: 'production'
+      "process.env": {
+        NODE_ENV: '"production"'
       }
     }),
     // extract css into its own file
     new MiniCssExtractPlugin({
-      filename: '[name].dll.css'
+      filename: "[name].dll.css"
     }),
     // manifest.json 描述动态链接库包含了哪些内容
     new webpack.DllPlugin({
-      path: path.join(__dirname, dllPath, '[name]-manifest.json'),
+      path: path.join(__dirname, dllPath, "[name]-manifest.json"),
       // 保持与 output.library 中名称一致
-      name: '[name]_[hash]',
+      name: "[name]_[hash]",
       context: process.cwd()
     })
   ]
 };
 
-webpack(dllConf, function (err, stats) {
+webpack(dllConf, function(err, stats) {
   if (err) throw err;
-  process.stdout.write(stats.toString({
-    colors: true,
-    modules: false,
-    children: false,
-    chunks: false,
-    chunkModules: false
-  }) + '\n\n');
+  process.stdout.write(
+    stats.toString({
+      colors: true,
+      modules: false,
+      children: false,
+      chunks: false,
+      chunkModules: false
+    }) + "\n\n"
+  );
 
   if (stats.hasErrors()) {
     const info = stats.toJson();
-    console.error('\n');
-    console.error(chalk.magenta('编译打包出错了 ~~~~(>_<)~~~~ \n'));
-    console.error(chalk.magenta('具体错误信息如下 \n'));
+    console.error("\n");
+    console.error(chalk.magenta("编译打包出错了 ~~~~(>_<)~~~~ \n"));
+    console.error(chalk.magenta("具体错误信息如下 \n"));
     console.error(chalk.red(`${info.errors}.\n`));
-    console.log(chalk.red('  Build failed with errors.\n'));
+    console.log(chalk.red("  Build failed with errors.\n"));
     process.exit(1);
   }
 
-  console.log(chalk.cyan('  Build dll complete.\n'));
+  console.log(chalk.cyan("  Build dll complete.\n"));
 });