vue2.0源码入口

vue系列第二篇—vue源码分析入口
vueJS

一. vue源码
我们安装好vue以后， 如何了解vue的的代码结构， 从哪里下手呢？

1.1. vue源码入口
vue的入口是package.json

<image src=“https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a0c1fe1b2e4447e69de4c25f60d141b8~tplv-k3u1fbpfcp-watermark.image” width=“60%”/>

来分别看看是什么含义

dependences：
  "dependencies": {
   
    "vue": "^2.5.2"
  },

// 这段代码告诉我们vue的版本： 2.5.2

这段代码告诉我们vue的版本： 2.5.2

engines
  "engines": {
   
    "node": ">= 6.0.0",
    "npm": ">= 3.0.0"
  },
// 指定当前node的版本和npm的版本

指定当前node的版本和npm的版本

devDependencies 里面是引入的各种loader

scripts

  "scripts": {
   
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "build": "node build/build.js"
  },

这就是重点了。 我们npm run build、npm run dev都是执行这里面的命令。 他告诉我们当执行build的时候是在执行那个文件。

dev： 读取的配置文件是build/webpack.dev.conf.js
build: 读取的配置文件是buld/build.js
1.2.项目文件的结构
先来看看项目的整体目录结构

<image src=“https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e7d63577126944d2bd12f5184dd42f04~tplv-k3u1fbpfcp-watermark.image” width=“40%”>

1.2.1. webpack相关配置
1.2.1.1 webpack.dev.config.js是本地开发环境读取配置文件。

'use strict'
// 定义变量, 生产环境和开发环境区别定义
const utils = require('./utils')
const webpack = require('webpack')
const config = require('../config')
const merge = require('webpack-merge')
const path = require('path')
// 引入公共配置
const baseWebpackConfig = require('./webpack.base.conf')
/**
 * 引入插件
 */
// 版权插件
const CopyWebpackPlugin = require('copy-webpack-plugin')
// 打包html到dist文件下, 并自动引入main.js文件
const HtmlWebpackPlugin = require('html-webpack-plugin')
//友好的错误提示插件
const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
const portfinder = require('portfinder')

const HOST = process.env.HOST
const PORT = process.env.PORT && Number(process.env.PORT)

// merge函数: 将两个配置和并. 这里是将基础配置和开发环境的配置进行合并
const devWebpackConfig = merge(baseWebpackConfig, {
   
  module: {
   
    rules: utils.styleLoaders({
    sourceMap: config.dev.cssSourceMap, usePostCSS: true })
  },
  // cheap-module-eval-source-map is faster for development
  devtool: config.dev.devtool,

  // these devServer options should be customized in /config/index.js
  devServer: {
   
    clientLogLevel: 'warning',
    historyApiFallback: {
   
      rewrites: [
        {
    from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'index.html') },
      ],
    },
    hot: true,
    contentBase: false, // since we use CopyWebpackPlugin.
    compress: true,
    host: HOST || config.dev.host,
    port: PORT || config.dev.port,
    open: config.dev.autoOpenBrowser,
    overlay: config.dev.errorOverlay
      ?