手撕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 时一样,我们更多的会在框架基础上按照自己的开发习 ...
随机推荐
- 从a标签传值中文乱码解决
<% out.print(new String(request.getParameter("a标签的参数").getBytes("iso8859-1"), ...
- P1197 [JSOI2008]星球大战
题目描述 很久以前,在一个遥远的星系,一个黑暗的帝国靠着它的超级武器统治者整个星系.某一天,凭着一个偶然的机遇,一支反抗军摧毁了帝国的超级武器,并攻下了星系中几乎所有的星球.这些星球通过特殊的以太隧道 ...
- 【微服务】之五:轻松搞定SpringCloud微服务-调用远程组件Feign
上一篇文章讲到了负载均衡在Spring Cloud体系中的体现,其实Spring Cloud是提供了多种客户端调用的组件,各个微服务都是以HTTP接口的形式暴露自身服务的,因此在调用远程服务时就必须使 ...
- php中session 入库的实现
ini_set("session.save_handler","user");//session.gc_probability = 1 分子ini_set(&q ...
- 【垃圾回收】Java内存回收实践经验 防止内存报警
jdk6和7服务器端(-server) 默认的新生代的垃圾回收器为:PS Scavenge,老年代默认的垃圾回收器为:PS MarkSweep 目前项目使用了jdk7,tomcat7,经常出现内存堆使 ...
- 最好用的MongoDB GUI - LivingMongo
LivingMongo是一个mongodb数据库的GUI操作系统,支持对数据字段的修改.数据搜索.集合的分类.索引管理.空间统计.慢查询等 demo地址 : http://living-mongo.k ...
- Android Toolbar 标题居中及字体样式自定义
首先找到 toolbar 所在xml布局文件,将toolbar控件放置在一个相对布局(RelativeLayout)中,然后设置toolbar的title为空(随便打几个空格即可): 然后在 tool ...
- Solr6.5.0配置solrcore图文详解
准备环境: solr6.5.0安装完成 jdk1.8 solrhome配置成功 详情:
- 自己动手写http服务器——主程序(三)
功能:目前只支持对资源的访问. 使用的模型:多线程加epoll,与传统的一个连接请求一个线程处理不同的是,这个模型只为那些需要服务的连接请求调用线程进行处理, 整个模型的大致流程 创建一个线程持对象, ...
- 《3》CentOS7.0+OpenStack+kvm云平台部署—配置Glance
感谢朋友支持本博客,欢迎共同探讨交流.因为能力和时间有限,错误之处在所难免,欢迎指正. 假设转载.请保留作者信息. 博客地址:http://blog.csdn.net/qq_21398167 原博文地 ...