更新初始化项目包

build/build.prd.js

 // 此文件是项目打包服务,用来构建一个全量压缩包
 // 命令: npm run build
 
-"use strict";
-// node for loading
-const ora = require("ora");
-// rm-rf for node
-const rm = require("rimraf");
-// console for node
-const chalk = require("chalk");
-// path for node
-const path = require("path");
-// webpack
-const webpack = require("webpack");
-// webpack production setting
-const config = require("./webpack.prod.conf");
-// 指定删除的文件
-const rmFile = path.resolve(__dirname, "../dist");
+'use strict'
+const ora = require('ora')
+const rm = require('rimraf')
+const chalk = require('chalk')
+const path = require('path')
+const webpack = require('webpack')
+const config = require('./webpack.prod.conf')
+const rmFile = path.resolve(__dirname, '../dist')
 // build start loading
-const spinner = ora("building for production...");
-spinner.start();
+const spinner = ora('building for production...')
+spinner.start()
 
 // 构建全量压缩包
-rm(rmFile, function(err) {
-  if (err) throw err;
-  webpack(config, function(err, stats) {
-    spinner.stop();
-    if (err) throw err;
+rm(rmFile, function (err) {
+    if (err) throw err
+    webpack(config, function (err, stats) {
+        spinner.stop()
+        if (err) throw err
         process.stdout.write(
             stats.toString({
                 colors: true,
@@ -33,20 +26,20 @@ rm(rmFile, function(err) {
                 children: false,
                 chunks: false,
                 chunkModules: false
-      }) + "\n\n"
-    );
+            }) + '\n\n'
+        )
 
         if (stats.hasErrors()) {
-      console.log(chalk.red("  Build failed with errors.\n"));
-      process.exit(1);
+            console.log(chalk.red('  Build failed with errors.\n'))
+            process.exit(1)
         }
 
-    console.log(chalk.cyan("  Build complete.\n"));
+        console.log(chalk.cyan('  Build complete.\n'))
         console.log(
             chalk.yellow(
-        "  Tip: built files are meant to be served over an HTTP server.\n" +
+                '  Tip: built files are meant to be served over an HTTP server.\n' +
                 "  Opening index.html over file:// won't work.\n"
             )
-    );
-  });
-});
+        )
+    })
+})

build/vue-loader.config.js

@@ -7,7 +7,7 @@ module.exports = (isDev) => {
         extractCSS: !isDev, // 将.vue中的css单独抽离出来
         cssModules: { // 解决class命名空间冲突
             localIdentName: isDev ? '[path]-[name]-[hash:base64:5]' : '[hash:base64:5]', // class命名
-            camelCase: true, // 驼峰class命名
+            camelCase: true // 驼峰class命名
         },
         // hotReload: false // 是否关闭组件热重载, 根据环境变量生成
         // 自定义loader模块

build/webpack.base.conf.js

-// 此文件主要是webpack开发环境和生成环境的通用配置
+/**
+ * @file webpack.base.conf 生产 & 开发环境通用配置
+ */
 'use strict'
-// 引入node path路径模块
 const path = require('path')
 const webpack = require('webpack')
-// 引入webpack生产环境配置参数
-const prodConfig = require('../config/config').build
 const createVueLoaderOptions = require('./vue-loader.config')
 
 // 拼接路径
-function resolve(track) {
+function resolve (track) {
     return path.join(__dirname, '..', track)
 }
 
-// 资源路径
-function assetsPath(_path) {
-    return path.join(prodConfig.staticPath, _path)
-}
-
+// 当前运行环境
 const isDev = process.env.NODE_ENV === 'development'
 
 const defaultPlugins = [
@@ -29,11 +24,8 @@ const defaultPlugins = [
     })
 ]
 
-// webpack基本配置
 module.exports = {
-    // 项目入口文件 -> webpack从此处开始构建
     entry: path.resolve(__dirname, '../src/index.js'),
-    // 配置模块如何被解析
     resolve: {
         // 自动解析文件扩展名(补全文件后缀)(左 -> 右)
         extensions: ['.js', '.vue', '.json'],
@@ -48,7 +40,7 @@ module.exports = {
         }
     },
     module: {
-        // 处理模块的规则(可在此处使用不同的loader来处理模块！)
+        // 处理模块的规则(可在此处使用不同的loader来处理模块)
         rules: [
             {
                 test: /\.(vue|js|jsx)$/,
@@ -84,17 +76,17 @@ module.exports = {
                         options: {
                             limit: 1024,
                             name: '[name]_[hash:8].[ext]',
-                            outputPath: 'images/', // 静态资源输出路径
+                            outputPath: 'images/' // 静态资源输出路径
                         }
                     }
                 ]
             },
             {
                 // 当前loader需要处理的文件类型(后缀)
-                test: /\.(eot|ttf|svg)$/, // iconfont字体文件
+                test: /\.(eot|ttf|svg|woff|woff2)(\?\S*)?$/, // iconfont字体文件
                 // 处理test中的文件类型需要用到的loader类型(名称)
                 use: {
-                    loader: 'file-loader', // 处理静态资源类型
+                    loader: 'file-loader' // 处理静态资源类型
                 }
             }
         ]

build/webpack.dev.conf.js

-// 该文件主要用于构建开发环境
+/**
+ * @file webpack.dev.conf 开发环境配置
+ */
 'use strict'
-// 引入node path路径模块
 const path = require('path')
-// 引入webpack
 const webpack = require('webpack')
-// 引入webpack开发环境配置参数
-const devConfig = require('../config/config').dev
-// 引入webpack基本配置
+const devConfig = require('../config/config').dev // 开发环境配置
 const baseConf = require('./webpack.base.conf')
-// webpack配置合并模块,可简单的理解为与Object.assign()功能类似
 const merge = require('webpack-merge')
-// 创建html入口文件的webpack插件
 const HtmlWebpackPlugin = require('html-webpack-plugin')
-// 编译提示的webpack插件
 const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
-// 发送系统通知的node模块
 const notifier = require('node-notifier')
-// 将webpack基本配置与开发环境配置合并！
 const devConf = merge(baseConf, {
-    // 项目出口, webpack-dev-server 生成的包并没有写入硬盘, 而是放在内存中
     output: {
-        // 文件名
         filename: '[name].[hash:8].js',
-        // html引用资源路径,在dev-server中,引用的是内存中文件
         publicPath: devConfig.publicPath
     },
-    // 生成sourceMaps(方便调试)
     devtool: devConfig.devtoolType,
-    // 启动一个express服务器,使我们可以在本地进行开发
     devServer: {
         // HMR控制台log等级
         clientLogLevel: 'warning',
@@ -127,7 +115,6 @@ const devConf = merge(baseConf, {
                     }
                 ]
             },
-            //使用element-ui
             {
                 test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,
                 loader: 'file-loader'
@@ -175,7 +162,7 @@ const devConf = merge(baseConf, {
                 })
             },
             clearConsole: true
-        }),
+        })
     ]
 })
 

build/webpack.prod.conf.js

-// 此文件主要用于构建生产环境的配置
+/**
+ * @file webpack.base.conf 生产环境配置
+ */
 
 'use strict'
-// 引入node path路径模块
 const path = require('path')
-// 引入webpack
 const webpack = require('webpack')
-// 一个webpack配置合并模块,可简单的理解为与Object.assign()功能类似！
 const merge = require('webpack-merge')
-// 引入webpack生产环境配置参数
-const prodConfig = require('../config/config').build
-// 引入webpack基本配置
+const prodConfig = require('../config/config').build // 生产环境配置
 const baseConf = require('./webpack.base.conf')
-// 创建html入口文件的webpack插件！
 const HtmlWebpackPlugin = require('html-webpack-plugin')
-// 抽离出css的webpack插件
 const ExtractTextPlugin = require('extract-text-webpack-plugin')
-// 压缩css的webpack插件
 const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
-// 拷贝文件的webpack插件
-// const CopyWebpackPlugin = require('copy-webpack-plugin')
 
 // 资源路径
-function assetsPath(_path) {
+function assetsPath (_path) {
     return path.join(prodConfig.staticPath, _path)
 }
-// 将webpack基本配置与生产环境配置合并！
+
 const prodConf = merge(baseConf, {
-  // 项目出口配置
     output: {
-    // build后所有文件存放的位置
         path: path.resolve(__dirname, '../dist'),
-    // html引用资源路径,可在此配置cdn引用地址！
         publicPath: prodConfig.publicPath,
-    // 文件名
         filename: assetsPath('js/[name].[chunkhash:8].js'),
-    // 用于打包require.ensure(代码分割)方法中引入的模块
         chunkFilename: assetsPath('js/[name].[chunkhash:8].js')
     },
-  // 生成sourceMaps(方便调试)
     devtool: prodConfig.devtoolType,
     module: {
         // 处理模块的规则(可在此处使用不同的loader来处理模块！)
@@ -98,7 +84,7 @@ const prodConf = merge(baseConf, {
         // 1. 第三方库chunk, 公共部分
         new webpack.optimize.CommonsChunkPlugin({
             name: 'vendor',
-      minChunks: function(module) {
+            minChunks: function (module) {
                 // 在node_modules的js文件
                 return (
                     module.resource &&