最近一直在研究 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,不过文档中还写了一句话:"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文件夹下的内容基本上就过完了,正如名字告诉我们的,这三个文件仅仅是写死的配置文件,截止目前还没遇到太多关于webpack的东西,不过随着我们接下来对build文件夹得内容进行分析后,我们就会对vue的配置有了更深的了解,也更能体会到vue配置的厉害之处!
来源: https://www.cnblogs.com/caideyipi/p/8187656.html