分析vue-cli 启动流程步骤

最新推荐文章于 2024-07-25 00:41:44 发布

yedegesong

最新推荐文章于 2024-07-25 00:41:44 发布

阅读量3.2k

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/weixiaoderensheng/article/details/82621462

版权

本文主要分析Vue CLI项目的启动流程，从package.json的dev命令开始，解析webpack-dev-server的使用，详细探讨了webpack.dev.conf.js、config/index.js和webpack.base.conf.js等配置文件在启动过程中的作用，包括--progress、--config和--inline等选项的功能。

摘要由CSDN通过智能技术生成

启动流程分析

启动入口: 找到package.json 包含工程依赖启动命名直接查找到 "scripts" 下的dev 启动命令，可以看到命令启动了webpack-dev-server 内置的服务，并且执行 build/webpack.dev.conf.js 文件

--progress 命令表示:查看构建过程

--config 表示自定义配置文件

--inline 自动刷新浏览器

步骤一：

webpack.dev.conf.js 指开发环境部署配置配置源码分析

'use strict'
//工具方法，主要分辨css预解析器包括:less,sass等，以及合并css到一个主的css文件中
const utils = require('./utils') 
const webpack = require('webpack')
//关于webpack 配置文件的输出与开发环境,如端口，静态资源存放路径等。详细查看config/index.js  配置说明
const config = require('../config')
//webpack 工具 大致用于合并两个对象配置
const merge = require('webpack-merge')
const path = require('path')
//关键文件 webpack 编译前端工程的配置，如入口文件地址，输出文件地址，别名，文件预解析器
const baseWebpackConfig = require('./webpack.base.conf')
//webpack 拷贝插件 配置某个起始目录文件拷贝到目标文件中
const CopyWebpackPlugin = require('copy-webpack-plugin')
//webpack  模板配置 配置模板文件预模板输出后的名称 用来资源自动插入  
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