vue.config.js配置解析

const path = require('path')
module.exports = {
    publicPath:  publicPath: process.env.NODE_ENV === 'production'? '/production-sub-path/': './'
    outputDir: 'zjjc',    //输出文件目录
    assetsDir: 'assets',    //放置生成的静态资源
    indexPath: 'indx.html',  //指定生成的 index.html 的输出路径 (相对于 outputDir)
    lintOnSave: false,   //eslint-loader 是否在保存的时候检查 安装@vue/cli-plugin-eslint有效
    runtimeCompiler: true,    //是否使用包含运行时编译器的 Vue 构建版本。设置true后你就可以在使用template
    productionSourceMap: false,   // 如果您不需要生产时的源映射，那么将此设置为false可以加速生产构建
    devServer: {
        https: false,
        open: true, //配置自动启动浏览器
        host: 'localhost',
        port: 8080,
        proxy: {
            '/zj-server/': {
                target:'http://172.6.4.11:8010',  //开发环境
                changeOrigin: true, //是否开启代理,
            },
        }
    },
    configureWebpack: config => {  //webpack配置
        const baseConfig = {
            resolve: {
                alias: {
                    '@assets': resolve('src/assets') //别名
                }
            },
        }
        return { ...baseConfig }
    },
    filenameHashing:false //去掉文件名中的hash
    //多页面应用
    pages:{
        //1对象模式（与字符串模式互斥）
        index: {
          // page 的入口
          entry: 'src/index/main.js',
          // 模板来源
          template: 'public/index.html',
          // 在 dist/index.html 的输出
          filename: 'index.html',
          // 当使用 title 选项时，
          // template 中的 title 标签需要是 
          title: 'Index Page',
          //chunks 选项的作用主要是针对多入口(entry)文件。当你有多个入口文件的时候，对应就会生成多个编译后的 js 文件。那么 chunks 选项就可以决定是否都使用这些生成的 js 文件，也就是编译完后html中引入的js文件（webpack打包入口）
          chunks: ['chunk-vendors', 'chunk-common', 'index']
        },
        //2字符串模式(与对象模式互斥)
        // 当使用只有入口的字符串格式时，
        // 模板会被推导为 `public/subpage.html`
        // 并且如果找不到的话，就回退到 `public/index.html`。
        // 输出文件名会被推导为 `subpage.html`。
        subpage: 'src/subpage/main.js'
    }
    //vuecli的webpack配置项修改
    //chaiwebpack对应api地址:https://github.com/Yatoo2018/webpack-chain/tree/zh-cmn-Hans
    
    chainWebpack: config => {
        //不生成index.html(不推荐性能不好,且不能在现代浏览器运行)
        config.plugins.delete('html')
        config.plugins.delete('preload')
        config.plugins.delete('prefetch')
        //限制内联文件加载大小，减少http请求数量
        config.module.rule('images').use('url-loader').loader('url-loader')
        .top(option=>Object.assign(options,{limit:10240})
        //css自动导入(oneOf唯一匹配 执行效率高)
        const types = ['vue-modules','vue','normal-modules','normal']
        types.forEach(type=>addStyleResource(config.module.rule('stylus').oneOf(type))
        //替换loader规则
        const svgRule = config.module.rule('svg')
        svgRule.uses.clear()
        svgRule.use('vue-svg-loader').loader('vue-svg-loader')
        //cache-loader：缓存编译。文件会缓存在node/modules/.cache中 遇到解决不了的编译问题可以删除该目录试试
        //thread-loader:多进程转换语法（主要用于资源过大打包使用-目前无使用场景占时只做了解）
        //修改插件选项
        //args[{
            title:'package.js name属性',
            templateParameters:[Function:templateParameters], //模板函数
            template:'对应html文件本地地址'
        }]
        config.plugin('html').tap(args=>args)
    },
    //直接合并到最初的webpack配置
    configureWebpack:{
        plugins:[
            new MyAwesomeWebpackPlugin()
        ]
    },
    css: {
        extract: process.env.NODE_ENV === 'production'
    }
};
function addStyleResource(rule){
    rule.use('style-resource').loader('style-resources-loader').option({
        patterns:[
            path.resolve(__dirname,'./src/style/imoirts.styl')
        ]
    })
}

1.webpack配置查看命令行
vue inspect //查看webpack全部配置
vue inspect >文件明类型  //讲webpack输出至配置文件
vue inspect --rules //查看webpack所有规则
vue inspect --rule svg //查看某一个规则的详细配置，此处查看的是svg的配置
vue inspect --rules  //列出所有规则
vue inspect --plugins  //列出所有规则

2.浏览器在页面加载完成后，利用空闲时间提前获取用户未来可能会访问的内容

3.vuecli中webapck基础默认配置 

4. env多环境配置

环境变量配置
.env  #所有环境被载入
.env.local #所有环境被载入.git忽略
.env.[mode] #制定模式载入
.env.[mode].local #制定模式载入.git忽略