vue-cli webpack項目npm run dev啟動過程

前言

通過vue init webpack和npm install命令初始化項目后，執行npm run dev就打開了網站http://localhost:8080。初學者不知道index.html、App.vue、main.js是如何粘在一起的，這里簡單說明一下。

啟動過程

1.npm run dev

npm run XXX是執行配置在package.json中的腳本，比如：

 "scripts": {
    "dev": "node build/dev-server.js",
    "start": "node build/dev-server.js",
    "build": "node build/build.js"
  },

這里就是執行了 node build/dev-server.js文件。

2.main.js和index.html

build/dev-server.js里var webpackConfig = require('./webpack.dev.conf') 調用了webpack.dev.conf配置文件。

var config = require('../config')
if (!process.env.NODE_ENV) {
  process.env.NODE_ENV = JSON.parse(config.dev.env.NODE_ENV)
}

var opn = require('opn')
var path = require('path')
var express = require('express')
var webpack = require('webpack')
var proxyMiddleware = require('http-proxy-middleware')
var webpackConfig = require('./webpack.dev.conf')

 webpack.dev.conf文件通過merge引用了webpack.base.conf.js文件。

在webpack.base.conf.js文件中調用了./src/main.js

main.js用到了一個html元素#app。

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import Mint from 'mint-ui'

var jquery = require('jquery');

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: { App }
})

再次回到webpack.dev.conf.js文件的結尾處。

   new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'index.html',
      inject: true
    }),

template指定了index.html作為輸出文件的模板文件。

3.App.vue和Hello.vue

在main.js文件中引用了App.vue和router。

App.vue里有個router-view元素，所有通過router返回的vue都會填充在這個元素里面。

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-view></router-view>
  </div>
</template>

router/index.js文件中的路由配置，當訪問根目錄時就返回@/components/Hello.vue里的內容。

   {
      path: '/',
      name: 'Hello',
      component: Hello
    },

所以最后看到的頁面是由App.vue和Hello.vue兩個模塊組成的。

 

參考鏈接

1. html-webpack-plugin

2. webpack開發和生產兩個環境的配置詳解