最近一直在研究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"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,不过文档中还写了一句话:“Turning this off can help with source map debugging.”额。。。
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文件夹下的内容基本上就过完了,正如名字告诉我们的,这三个文件仅仅是写死的配置文件,截止目前还没遇到太多
总结
以上所述是小编给大家介绍的vue-cli配置文件——config篇,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
更新日志
- 炉石传说月初最强卡组有哪些 2024月初最强上分卡组推荐
- 狼人杀亮相原生鸿蒙之夜 假面科技强势登陆华为生态
- 12小时光线挑战!AI画质专家才是大平层首选
- 2024游戏IP报告:1~9月规模1960亿 68%用户愿为之付费
- 群星.2024-今夜一起为爱鼓掌电视剧原声带【相信音乐】【FLAC分轨】
- BIGFOUR.2013-大家利事【寰亚】【WAV+CUE】
- 李美凤.1992-情深透全情歌集【EMI百代】【WAV+CUE】
- 田震2024-《时光音乐会》[金峰][WAV+CUE]
- 群星《监听天碟3》[LECD]限量版[WAV+CUE]
- 心妤《声如夏花HQ》头版限量编号[WAV+CUE]
- 群星《摇滚五杰》[低速原抓WAV+CUE][1.1G]
- 群星 《2024好听新歌30》十倍音质 U盘音乐 [WAV+分轨]
- 群星《试音草原·女声篇》经典蒙古民歌[WAV+CUE][1G]
- 陈慧娴《永远是你的朋友》头版限量编号MQA-UHQCD2024[低速原抓WAV+CUE]
- 曼丽·女人三十《如果·爱》限量1:1母盘直刻[低速原抓WAV+CUE]