vue-webpack-boilerplate分析

# 全局安装 vue-cli
$ npm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
$ vue init webpack my-project
# 安装依赖，走你
$ cd my-project
$ npm install
$ npm run dev

  "scripts": {
    "dev": "node build/dev-server.js",
    "start": "node build/dev-server.js",
    "build": "node build/build.js",
    "lint": "eslint --ext .js,.vue src"
  },

// 不错的node模块，使输出内容带前景色和背景色
var chalk = require(‘chalk‘)
// 语义化版本，详见http://semver.org/lang/zh-CN/
// https://www.npmjs.com/package/semver
var semver = require(‘semver‘)
var packageConfig = require(‘../package.json‘)
// 顾名思义，提供了一些和shell命令名字功能都一样的方法
var shell = require(‘shelljs‘)
function exec (cmd) {
  return require(‘child_process‘).execSync(cmd).toString().trim()
}

var versionRequirements = [
  {
    name: ‘node‘,
    // semver.clean(‘  =v1.2.3   ‘) => ‘1.2.3‘
    currentVersion: semver.clean(process.version),
    versionRequirement: packageConfig.engines.node
  },
]

if (shell.which(‘npm‘)) {
  versionRequirements.push({
    name: ‘npm‘,
    currentVersion: exec(‘npm --version‘),
    versionRequirement: packageConfig.engines.npm
  })
}

module.exports = function () {
  var warnings = []
  for (var i = 0; i < versionRequirements.length; i++) {
    var mod = versionRequirements[i]
    if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) {
      warnings.push(mod.name + ‘: ‘ +
        chalk.red(mod.currentVersion) + ‘ should be ‘ +
        chalk.green(mod.versionRequirement)
      )
    }
  }

  if (warnings.length) {
    console.log(‘‘)
    console.log(chalk.yellow(‘To use this template, you must update following to modules:‘))
    console.log()
    for (var i = 0; i < warnings.length; i++) {
      var warning = warnings[i]
      console.log(‘  ‘ + warning)
    }
    console.log()
    process.exit(1)
  }
}

"engines": {
  "node": ">= 4.0.0",
  "npm": ">= 3.0.0"
},

"engines": {
  "node": ">= 4.0.0",
  "npm": ">= 6.0.0"
},

// see http://vuejs-templates.github.io/webpack for documentation.
var path = require(‘path‘)

module.exports = {
  build: {
    env: require(‘./prod.env‘),
    index: path.resolve(__dirname, ‘../dist/index.html‘),
    assetsRoot: path.resolve(__dirname, ‘../dist‘),
    assetsSubDirectory: ‘static‘,
    assetsPublicPath: ‘/‘,
    productionSourceMap: true,
    // Gzip off by default as many popular static hosts such as
    // Surge or Netlify already gzip all static assets for you.
    // Before setting to `true`, make sure to:
    // npm install --save-dev compression-webpack-plugin
    productionGzip: false,
    productionGzipExtensions: [‘js‘, ‘css‘],
    // Run the build command with an extra argument to
    // View the bundle analyzer report after build finishes:
    // `npm run build --report`
    // Set to `true` or `false` to always turn it on or off
    bundleAnalyzerReport: process.env.npm_config_report
  },
  dev: {
    env: require(‘./dev.env‘),
    port: 8080,
    autoOpenBrowser: true,
    assetsSubDirectory: ‘static‘,
    assetsPublicPath: ‘/‘,
    proxyTable: {},
    // CSS Sourcemaps off by default because relative paths are "buggy"
    // with this option, according to the CSS-Loader README
    // (https://github.com/webpack/css-loader#sourcemaps)
    // In our experience, they generally work as expected,
    // just be aware of this issue when enabling this option.
    cssSourceMap: false
  }
}

var merge = require(‘webpack-merge‘)
var prodEnv = require(‘./prod.env‘)

module.exports = merge(prodEnv, {
  NODE_ENV: ‘"development"‘,
  KEY_ID: ‘123456‘
})

  plugins: [
    new webpack.DefinePlugin({
      ‘process.env‘: config.dev.env
    }),

// 工具方法
var utils = require(‘./utils‘)
var webpack = require(‘webpack‘)
var config = require(‘../config‘)
// webpack官方提供的一个webpack配置文件合并工具
var merge = require(‘webpack-merge‘)
// 开发时和发布时公用的配置文件信息
var baseWebpackConfig = require(‘./webpack.base.conf‘)
// 一个webpack插件，生成入口html文件，最强大的功能是动态自动插入webpack生成的css和js资源文件
// 一般的单页面应用只有一个主html文件比如index.html，webpack打包生成js和css文件后，
// 我们当然可以在手动写标签引入这些资源文件，但有时候生成后的文件带有hash。如app-3d31retr.js。这时需要自动引入，并替换html。
var HtmlWebpackPlugin = require(‘html-webpack-plugin‘)
// 不解释，自行去github查文档
var FriendlyErrorsPlugin = require(‘friendly-errors-webpack-plugin‘)

// add hot-reload related code to entry chunks
Object.keys(baseWebpackConfig.entry).forEach(function (name) {
  baseWebpackConfig.entry[name] = [‘./build/dev-client‘].concat(baseWebpackConfig.entry[name])
})

module.exports = merge(baseWebpackConfig, {
  module: {
    rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap })
  },
  // cheap-module-eval-source-map is faster for development
  devtool: ‘#cheap-module-eval-source-map‘,
  plugins: [
    new webpack.DefinePlugin({
      ‘process.env‘: config.dev.env
    }),
    // https://github.com/glenjamin/webpack-hot-middleware#installation--usage
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoEmitOnErrorsPlugin(),
    // https://github.com/ampedandwired/html-webpack-plugin
    new HtmlWebpackPlugin({
      filename: ‘index.html‘,
      template: ‘index.html‘,
      inject: true
    }),
    new FriendlyErrorsPlugin()
  ]
})

  resolve: {
    // 导入文件自动补全文件后缀
    // 比如 src/index.js 中的 import App from ‘./App‘
    // 完整的是import App from ‘./App.vue‘
    extensions: [‘.js‘, ‘.vue‘, ‘.json‘],
    // 别名映射，引入模块中可缩短字符串长度
    // 如 import {playMode} from ‘common/js/config‘ 可能实际是
    // import {playMode} from ‘../../common/js/config‘
    alias: {
      ‘vue$‘: ‘vue/dist/vue.esm.js‘,
      ‘@‘: resolve(‘src‘),
      ‘common‘: resolve(‘src/common‘),
      ‘components‘: resolve(‘src/components‘),
      ‘base‘: resolve(‘src/base‘),
      ‘api‘: resolve(‘src/api‘)
    }
  },
  module: {
    rules: [
      // {
      //   test: /\.(js|vue)$/,
      //   loader: ‘eslint-loader‘,
      //   enforce: ‘pre‘,
      //   include: [resolve(‘src‘), resolve(‘test‘)],
      //   options: {
      //     // 友好提供eslint未通过原因及链接
      //     formatter: require(‘eslint-friendly-formatter‘)
      //   }
      // },
      {
        test: /\.vue$/,
        // https://vue-loader.vuejs.org/zh-cn/configurations/pre-processors.html
        loader: ‘vue-loader‘,
        // 最终结果类似，
        /*
        options: {
          loaders: {
            css: [‘vue-style-loader‘, {
              loader: ‘css-loader‘,
              options: {
                minimize: false,
                sourceMap: false
              }
            }],
            postcss: [‘vue-style-loader‘, {
              loader: ‘css-loader‘,
              options: {
                minimize: false,
                sourceMap: false
              }
            }],
            less: [‘vue-style-loader‘, {
              loader: ‘css-loader‘,
              options: {
                minimize: false,
                sourceMap: false
              }
            },
            {
              loader: ‘less-loader‘,
              options: {
                sourceMap: false
              }
            }],
            sass: [‘vue-style-loader‘, {
              loader: ‘css-loader‘,
              options: {
                minimize: false,
                sourceMap: false
              }
            },
            {
              loader: ‘sass-loader‘,
              options: {
                indentedSyntax: true,
                sourceMap: false
              }
            }],
            scss: [‘vue-style-loader‘, {
              loader: ‘css-loader‘,
              options: {
                minimize: false,
                sourceMap: false
              }
            },
            {
              loader: ‘sass-loader‘,
              options: {
                sourceMap: false
              }
            }],
            stylus: [‘vue-style-loader‘, {
              loader: ‘css-loader‘,
              options: {
                minimize: false,
                sourceMap: false
              }
            },
            {
              loader: ‘stylus-loader‘,
              options: {
                sourceMap: false
              }
            }],
            styl: [‘vue-style-loader‘, {
              loader: ‘css-loader‘,
              options: {
                minimize: false,
                sourceMap: false
              }
            },
            {
              loader: ‘stylus-loader‘,
              options: {
                sourceMap: false
              }
            }]
          }
        }
         */
        options: vueLoaderConfig
      },

// 检测是否满足版本需要
require(‘./check-versions‘)()
// 引入外层config中的index.js，分为运行时和开发时的变量信息
// 我们可以自己添加一些变量
var config = require(‘../config‘)
if (!process.env.NODE_ENV) {
  // 最终变成 process.env.NODE_ENV = JSON.parse(‘"development"‘)
  process.env.NODE_ENV = JSON.parse(config.dev.env.NODE_ENV)
}

// 第三方模块。可调用系统默认的程序打开图片，地址等，如opn(‘http://localhost:8080‘); open(‘./demo.jpg‘)
var opn = require(‘opn‘)
// node内置的核心模块
var path = require(‘path‘)
// node框架，在这里用来启动webserver
var express = require(‘express‘)
// 不解释，核心编译工具
// 官方文档中不推荐全局安装webpack，然后执行全局变量的方式
// 这里在nodejs里引入webpack，用提供的api来配置并启动
var webpack = require(‘webpack‘)
// http代理中间件，可转发api等
var proxyMiddleware = require(‘http-proxy-middleware‘)
var webpackConfig = require(‘./webpack.dev.conf‘)