最近一直在研究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
}
}
内容版权声明：除非注明，否则皆为本站原创文章。