解读vue配置文件（vue.config.js）

'use strict'
const path = require('path')
const defaultSettings = require('./src/settings.js')
const CompressionPlugin = require('compression-webpack-plugin')function resolve(dir) {return path.join(__dirname, dir)
}const name = defaultSettings.title // 网址标题
const port = 8013 // 端口配置// All configuration item explanations can be find in https://cli.vuejs.org/config/
module.exports = {// hash 模式下可使用// publicPath: process.env.NODE_ENV === 'development' ? '/' : './',publicPath: '/',outputDir: 'dist',assetsDir: 'static',lintOnSave: process.env.NODE_ENV === 'development',productionSourceMap: false,devServer: {port: port,open: true,overlay: {warnings: false,errors: true},proxy: {'/api': {target: process.env.VUE_APP_BASE_API,changeOrigin: true,pathRewrite: {'^/api': 'api'}},'/auth': {target: process.env.VUE_APP_BASE_API,changeOrigin: true,pathRewrite: {'^/auth': 'auth'}}}},configureWebpack: {// provide the app's title in webpack's name field, so that// it can be accessed in index.html to inject the correct title.name: name,resolve: {alias: {'@': resolve('src'),'@crud': resolve('src/components/Crud')}},plugins: [// https://www.ydyno.com/archives/1260.html 使用gzip解压缩静态文件new CompressionPlugin({test: /\.(js|css|html)?$/i, // 压缩文件格式filename: '[path].gz[query]', // 压缩后的文件名algorithm: 'gzip', // 使用gzip压缩minRatio: 0.8 // 压缩率小于1才会压缩})]},chainWebpack(config) {config.plugins.delete('preload') // TODO: need testconfig.plugins.delete('prefetch') // TODO: need test// set svg-sprite-loaderconfig.module.rule('svg').exclude.add(resolve('src/assets/icons')).end()config.module.rule('icons').test(/\.svg$/).include.add(resolve('src/assets/icons')).end().use('svg-sprite-loader').loader('svg-sprite-loader').options({symbolId: 'icon-[name]'}).end()// set preserveWhitespaceconfig.module.rule('vue').use('vue-loader').loader('vue-loader').tap(options => {options.compilerOptions.preserveWhitespace = truereturn options}).end()config// https://webpack.js.org/configuration/devtool/#development.when(process.env.NODE_ENV === 'development',config => config.devtool('cheap-source-map'))config.when(process.env.NODE_ENV !== 'development',config => {config.plugin('ScriptExtHtmlWebpackPlugin').after('html').use('script-ext-html-webpack-plugin', [{// `runtime` must same as runtimeChunk name. default is `runtime`inline: /runtime\..*\.js$/}]).end()config.optimization.splitChunks({chunks: 'all',cacheGroups: {libs: {name: 'chunk-libs',test: /[\\/]node_modules[\\/]/,priority: 10,chunks: 'initial' // only package third parties that are initially dependent},elementUI: {name: 'chunk-elementUI', // split elementUI into a single packagepriority: 20, // the weight needs to be larger than libs and app or it will be packaged into libs or apptest: /[\\/]node_modules[\\/]_?element-ui(.*)/ // in order to adapt to cnpm},commons: {name: 'chunk-commons',test: resolve('src/components'), // can customize your rulesminChunks: 3, //  minimum common numberpriority: 5,reuseExistingChunk: true}}})config.optimization.runtimeChunk('single')})},transpileDependencies: ['vue-echarts','resize-detector']
}

这是一个Vue.js的配置文件，用于指定项目的构建和开发服务器的行为。让我们逐步解读：

resolve 函数：
- 用于解析路径。它被定义为简化创建目录的绝对路径的过程。
name 和 port 常量：
- name 设置为来自设置文件的标题。
- port 设置为 8013，表示开发服务器的端口号。
publicPath：
- 此选项指定项目的基本 URL。在这种情况下，设置为 '/'，表示项目预期从域的根目录提供。
outputDir 和 assetsDir：
- outputDir 指定生产构建的输出目录。
- assetsDir 指定输出目录内静态资产（图像、字体等）的目录。
lintOnSave：
- 如果为 true，eslint-loader 将在开发时保存时运行，有助于强制执行编码标准。
productionSourceMap：
- 如果设置为 false，将在生产构建中禁用源映射，可能会减小构建的大小。
devServer：
- 开发服务器的配置，包括端口、是否在服务器启动时打开浏览器以及用于 API 请求的代理设置。
configureWebpack：
- webpack 的额外配置。
- 提供了 webpack 配置中应用程序的名称，解析别名以更轻松地导入，以及在生产构建期间使用 CompressionPlugin 进行 gzip 压缩。
chainWebpack：
- 允许链接 webpack 配置。用于自定义内部 webpack 配置。
- 包括用于 SVG 图标加载的设置，对其他 webpack 设置的调整，以及对某些环境中不必要的插件的优化。
transpileDependencies：
- 一个需要使用 Babel 转译的依赖项数组。这在你的依赖项使用现代 JavaScript 语法需要转译以确保兼容性时很有用。