手撕vue-cli配置文件——config篇
最近一直在研究webpack,突然想看看vue-cli中的webpack是如何配置,查阅了很多相关的文章,所以也想出几篇关于vue-cli配置的东西。正所谓“工欲善其事必先利其器”嘛!这一篇主要是分析vue中关于config文件夹中的相关代码;
首先我们先看一下config的文件结构:
|-config
|---dev.env.js
|---index.js
|---prod.env.js
打开我们的vue项目文件夹我们可以清楚的看到文件夹下的三个文件,“dev.env.js”,“index.js”,“prod.env.js”,我们先打开prod.env.js的文件,看里面的内容:
'use strict'
module.exports = {
NODE_ENV: '"production"'
}
prod.env.js的内容非常简单,仅仅是导出了一个对象,里面写明了执行环境是“production(生产环境)”;我们接下来看与之对应的“dev.env.js”文件:
'use strict'
//引入webpack-merge模块
const merge = require('webpack-merge')
//引入刚才打开的prod.env.js
const prodEnv = require('./prod.env') module.exports = merge(prodEnv, {
NODE_ENV: '"development"'
})
在“dev.env.js”中,先引入了webpack-merge这个模块。这个模块的作用是来合并两个配置文件对象并生成一个新的配置文件,有点儿类似于es6的object.assign();
vue-cli中将一些通用的配置抽出来放在一个文件内,在对不同的环境配置不同的代码,最后使用webpack-merge来进行合并,减少重复代码,正如文档中所说,“webpack遵循不重复原则(Don't repeat yourself - DRY),不会再不同的环境中配置相同的代码”
当然,关于webpack-merge的内容还远不止这些,想了解更多关于这个模块的朋友请访问 https://www.npmjs.com/package/webpack-merge
好,让我们接着回到代码中来,引入webpack-merge后这个文件又引入了prod.env.js,接着就将prod.env.js的配置和新的配置,即指明开发环境(development)进行了merge。(我有点儿不太理解为什么要这样做,如果不merge直接写module.exports={NODE_ENV:'"development'}也是可以的,难道是为了优雅降级?)
还有一点需要注意是的,development和production一定要加双引号,不然会报错!!!
最后,我们来看index.js:
'use strict'
// Template version: 1.2.4
// see http://vuejs-templates.github.io/webpack for documentation. const path = require('path') module.exports = {
dev: { // Paths
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {}, // Various Dev Server settings
host: 'localhost', // can be overwritten by process.env.HOST
port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
autoOpenBrowser: false,
errorOverlay: true,
notifyOnErrors: true,
poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions- // Use Eslint Loader?
// If true, your code will be linted during bundling and
// linting errors and warnings will be shown in the console.
useEslint: true,
// If true, eslint errors and warnings will also be shown in the error overlay
// in the browser.
showEslintErrorsInOverlay: false, /**
* Source Maps
*/ // https://webpack.js.org/configuration/devtool/#development
devtool: 'eval-source-map', // If you have problems debugging vue-files in devtools,
// set this to false - it *may* help
// https://vue-loader.vuejs.org/en/options.html#cachebusting
cacheBusting: true, // 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,
}, build: {
// Template for index.html
index: path.resolve(__dirname, '../dist/index.html'), // Paths
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: '/', /**
* Source Maps
*/ productionSourceMap: true,
// https://webpack.js.org/configuration/devtool/#production
devtool: '#source-map', // 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
}
}
开头引入了node中的path模块,
然后我们先来看dev下的配置内容:
assetsSubDirectory指的是静态资源文件夹,默认“static”, assetsPublicPath指的是发布路径, proxyTable是我们常用来配置代理API的地方,后面的host和port相信大家都知道,我就不细说了, autoOpenBrowser是否自动打开浏览器 errorOverlay查询错误 notifyOnErrors通知错误
,
poll是跟devserver相关的一个配置,webpack为我们提供的devserver是可以监控文件改动的,但在有些情况下却不能工作,我们可以设置一个轮询(poll)来解决 useEslint是否使用eslint showEslintErrorsInOverlay是否展示eslint的错误提示 devtool webpack提供的用来方便调试的配置,它有四种模式,可以查看webpack文档了解更多 cacheBusting 一个配合devtool的配置,当给文件名插入新的hash导致清楚缓存时是否生成souce maps,默认在开发环境下为true cssSourceMap 是否开启cssSourceMap
我们再来看build下的配置内容:
index 编译后index.html的路径,path.resolve(__dirname, '../dist')中 path.resolve(__dirname)指的是index.js所在的绝对路径,再去找“../dist”这个路径(node相关的知识), assetsRoot打包后的文件根路径,至于assetsSubDirectory和assetsPublicPath跟dev中的一样, productionSourceMap是否开启source-map, devtool同dev, productionGzip是否压缩, productionGzipExtensions gzip模式下需要压缩的文件的扩展名,设置后会对相应扩展名的文件进行压缩 bundleAnalyzerReport 是否开启打包后的分析报告
截止到这儿,config文件夹下的内容基本上就过完了,正如名字告诉我们的,这三个文件仅仅是写死的配置文件,截止目前还没遇到太多关于webpack的东西,不过随着我们接下来对build文件夹得内容进行分析后,我们就会对vue的配置有了更深的了解,也更能体会到vue配置的厉害之处!
手撕vue-cli配置文件——config篇的更多相关文章
- 手撕vue-cli配置——utils.js篇
utils.js文件主要是用来处理各种css loader的,比如css-loader,less-loader等. //引入path模块 const path = require('path') // ...
- Vue Cli 3:vue.config.js配置文件
Vue Cli 3生成的项目结构,没有build.config目录,而是使用vue.config.js来进行配置. vue.config.js 是一个可选的配置文件,如果项目的 (和 package. ...
- Vue CLI 是如何实现的 -- 终端命令行工具篇
Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统,提供了终端命令行工具.零配置脚手架.插件体系.图形化管理界面等.本文暂且只分析项目初始化部分,也就是终端命令行工具的实现. 0. 用法 ...
- Netty实现高性能IOT服务器(Groza)之手撕MQTT协议篇上
前言 诞生及优势 MQTT由Andy Stanford-Clark(IBM)和Arlen Nipper(Eurotech,现为Cirrus Link)于1999年开发,用于监测穿越沙漠的石油管道.目标 ...
- vue cli 中关于vue.config.js中chainWebpack的配置
Vue CLI 的官方文档上写:调整webpack配置最简单的方式就是在vue.config.js中的configureWebpack选项提供一个对象. Vue CLI 内部的 webpack 配置 ...
- Vue CLI及其vue.config.js(一)
有时候我们为了快速搭建一个vue的完整系统,经常会用到vue-cli,vue-cli用起来很方便而且命令简单容易上手,但缺点是在构建的时候我感觉有一些慢,因为CLI 服务 (@vue/cli-serv ...
- Vue Cli安装以及使用
因为公司项目要用vue框架,所以会用vue-cli来新建项目.用过vue的都知道,要全局安装vue以及脚手架vue-cli,然后执行vue init webpack projectname来新建v ...
- Vue CLI 3 中文文档
翻译文档 文档翻译全貌 前言 之前写了一篇Vue CLI 3.x 版本的简单体验,当时文档还不全,具体的使用方法并不是很清楚,大概是2月7号,收到Vue CLI 3接近Beta版的提示,作者尤雨溪也讲 ...
- [Vue 牛刀小试]:第十七章 - 优化 Vue CLI 3 构建的前端项目模板(1)- 基础项目模板介绍
一.前言 在上一章中,我们开始通过 Vue CLI 去搭建属于自己的前端 Vue 项目模板,就像我们 .NET 程序员在使用 asp.net core 时一样,我们更多的会在框架基础上按照自己的开发习 ...
随机推荐
- Mysql--数据的操作
1.插入数据 1.1 插入完整数据记录 语法1: 例子: 语法2: 例子: 1.2 插入数据记录一部分 语法: 例子: 1.3 插入多条数据记录 1.插入多条完整的数据 语法: 例子: 插入多条部 ...
- 实用的jQuery技巧
1.回到顶部按钮 利用jQuery里的animate和scrollTop方法,你便不需要使用插件创建简单的滚动到顶部动画. // Back to top $('.top').click(functi ...
- 浅谈canvas绘画王者荣耀--雷达图
背景: 一日晚上下班的我静静的靠在角落上听着歌,这时"滴!滴!"手机上传来一阵qq消息.原来我人在问王者荣耀的雷达图在页面上如何做出来的,有人回答用canvas绘画.那么问题来了, ...
- Loadrunner手动编写包含事务、检查点、关联等元素的脚本实例
一.前言: 本文适合初学者,包含很多细节,包括 二.准备: 1.以虚拟机中的Linux系统作为服务器,开启bugfree服务. 2.以fiddler作为抓包工具,辅助脚本开发. 3.脚本流程:bugf ...
- PHP的AES加密类
PHP的AES加密类 aes.php <?php /* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ...
- linux下的数据库管理工具phpmyadmin安装以及文件大小限制的配置修改
1.首先需要安装mysql和apache服务.具体安装过程百度; 2.安装php环境以及对apache的扩展; sudo apt install php7.0 对于这些软件可能还需要各自进行配置,这 ...
- node.js之第一天
一.http模块 //require表示引包,引包就是引用自己的一个特殊功能 var http = require("http"); //创建服务器,参数是一个回调函数,表示如果有 ...
- 毕达哥拉斯树(pythagorasTree)原理解析及canvas动画实现
以前就看到了这个东西,由于太忙了最近才有时间来实现这个; 该文章适合有一定 canvas 基础的人阅读; 首先说说他的原理: The construction of the Pythagoras tr ...
- day10、nfs+rsync全网备份及实时同步
题目要求 注意:博主使用的系统为: [root@web01 ~]# uname -a Linux web01 2.6.32-696.el6.x86_64 #1 SMP Tue Mar 21 19:29 ...
- Java IO(3)非阻塞式输入输出(NIO)
在上篇<Java IO(2)阻塞式输入输出(BIO)>的末尾谈到了什么是阻塞式输入输出,通过Socket编程对其有了大致了解.现在再重新回顾梳理一下,对于只有一个“客户端”和一个“服务器端 ...