Vue生态圈之----Vue CLI3学习整理----vue.config.js

// vue.config.js
module.exports = {
    // 已弃用，请使用publicPath
    baseUrl:'/',
    
    // 应用部署在一个域名的根路径上
    publicPath:'/', // 默认
    // 应用部署在一个域名的子路径上 https://www.my-app.com/my-app/
    publicPath:'/my-app/',
    // 把开发服务器架设在根路径，可以使用一个条件式的值
    publicPath: process.env.NODE_ENV === 'production' ? '/production-sub-path/' : '/',

    // 为生产环境构建文件的目录
    outputDir:'dist', // 默认

    // 放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录
    // 从生成的资源覆写 filename 或 chunkFilename 时，assetsDir 会被忽略
    assetsDir:'', // 默认

    // 指定生成的 index.html 的输出路径 (相对于 outputDir)。也可以是一个绝对路径。
    indexPath:'index.html', // 默认

    // 关闭文件名哈希
    filenameHashing:true, // 默认

    // 在 multi-page 模式下构建应用
    pages:undefined // 默认
    // 每个“page”应该有一个对应的 JavaScript 入口文件
    pages:{
        index: {
          // page 的入口
          entry: 'src/index/main.js',
          // 模板来源
          template: 'public/index.html',
          // 在 dist/index.html 的输出
          filename: 'index.html',
          // 当使用 title 选项时，
          // template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title>
          title: 'Index Page',
          // 在这个页面中包含的块，默认情况下会包含
          // 提取出来的通用 chunk 和 vendor chunk。
          chunks: ['chunk-vendors', 'chunk-common', 'index']
        },
        // 当使用只有入口的字符串格式时，
        // 模板会被推导为 `public/subpage.html`
        // 并且如果找不到的话，就回退到 `public/index.html`。
        // 输出文件名会被推导为 `subpage.html`。
        subpage: 'src/subpage/main.js'
    },

    // 是否在开发环境下通过 eslint-loader 在每次保存时 lint 代码。这个值会在 @vue/cli-plugin-eslint 被安装之后生效。
    // true或'warning：'输出为编译警告
    // 'default'：让 lint 错误在开发时直接显示在浏览器中
    // 'error'：把 lint 警告也输出为编译错误
    lintOnSave:'default', //默认
    // 在生产构建时禁用 eslint-loader
    // 另外查看devServer设置
    lintOnSave: process.env.NODE_ENV !== 'production',

    // 是否使用包含运行时编译器的 Vue 构建版本
    runtimeCompiler:false, // 默认

    // 默认情况下 babel-loader 会忽略所有 node_modules 中的文件。
    //如果想要通过 Babel 显式转译一个依赖，可以在这个选项中列出来。
    transpileDependencies:[] // 默认

    // 生产环境是否需要 source map
    productionSourceMap:true, // 默认

    // 设置生成的 HTML 中 <link rel="stylesheet"> 和 <script> 标签的 crossorigin 属性。
    // 该选项仅影响由 html-webpack-plugin 在构建时注入的标签 - 直接写在模版 (public/index.html) 中的标签不受影响。
    crossorigin:undefined, // 默认

    // 在生成的 HTML 中的 <link rel="stylesheet"> 和 <script> 标签上启用 Subresource Integrity(SRI)。如果你构建后的文件是部署在 CDN 上的，启用该选项可以提供额外的安全性。
    // 需要注意的是该选项仅影响由 html-webpack-plugin 在构建时注入的标签 - 直接写在模版 (public/index.html) 中的标签不受影响。
    integrity:false, //默认

    // 如果这个值是一个对象，则会通过 webpack-merge 合并到最终的配置中。
    // 如果这个值是一个函数，则会接收被解析的配置作为参数。该函数既可以修改配置并不返回任何东西,也可以返回一个被克隆或合并过的配置版本。
    configureWebpack:Object||Function,
    configureWebpack:{
    　　plugins: [ new MyAwesomeWebpackPlugin() ]
    },
    configureWebpack:config => {
    　　if (process.env.NODE_ENV === 'production') { 
　　　　　　// 为生产环境修改配置... 
　　　　} else { 
　　　　　　// 为开发环境修改配置... 
　　　　}
    }

    //是一个函数，会接收一个基于 webpack-chain 的 ChainableConfig 实例。允许对内部的 webpack 配置进行更细粒度的修改
    chainWebpack:Function,
　　 chainWebpack:config => {
　　　　// 修改 Loader 选项
　　　　config.module 
　　　　　　.rule('vue') 
　　　　　　.use('vue-loader') 
　　　　　　.loader('vue-loader') 
　　　　　　.tap(options => { 
　　　　　　　　// 修改它的选项... 
　　　　　　　　return options 
　　　　　　})

　　　　// 添加一个新的 Loader
　　　　config.module 
　　　　　　.rule('graphql') 
　　　　　　.test(/.graphql$/) 
　　　　　　.use('graphql-tag/loader') 
　　　　　　.loader('graphql-tag/loader') 
　　　　　　.end() 
　　　　　　// 你还可以再添加一个 loader 
　　　　　　.use('other-loader') 
　　　　　　.loader('other-loader') 
　　　　　　.end()

　　　　// 替换一个规则里的 Loader
　　　　const svgRule = config.module.rule('svg') 
　　　　// 清除已有的所有 loader。 
　　　　// 如果你不这样做，接下来的 loader 会附加在该规则现有的 loader 之后。 
　　　　svgRule.uses.clear() 
　　　　// 添加要替换的 loader 
　　　　svgRule 
　　　　　　.use('vue-svg-loader') 
　　　　　　.loader('vue-svg-loader')

　　　　// 修改插件选项
　　　　config 
　　　　　　.plugin('html') 
　　　　　　.tap(args => { 
　　　　　　　　return [/* 传递给 html-webpack-plugin's 构造函数的新参数 */] 
　　　　　　})

　　　　// 更多 https://github.com/Yatoo2018/webpack-chain/tree/zh-cmn-Hans
　　}

    //相关CSS的配置
    css:{
        // 已弃用，请使用requireModuleExtension
        modules:true,
        //默认情况下，只有 *.module.[ext] 结尾的文件才会被视作 CSS Modules 模块。设置为 false 后你就可以去掉文件名中的 .module 并将所有的 *.(css|scss|sass|less|styl(us)?) 文件视为 CSS Modules 模块。
        // 如果你在 css.loaderOptions.css 里配置了自定义的 CSS Module 选项，则 css.requireModuleExtension 必须被显式地指定为 true 或者 false，否则我们无法确定你是否希望将这些自定义配置应用到所有 CSS 文件中。
        requireModuleExtension:true, // 默认
        // 向 CSS 相关的 loader 传递选项
        loaderOptions:{}, // 默认
        // 支持的 loader 有 css-loader|postcss-loader|sass-loader|less-loader|stylus-loader 
        // 另外，也可以使用 scss 选项，针对 scss 语法进行单独配置（区别于 sass 语法）。
        loaderOptions: {
          css: {
            // 这里的选项会传递给 css-loader
          },
          postcss: {
            // 这里的选项会传递给 postcss-loader
          }
        },
        // 是否将组件中的 CSS 提取至一个独立的 CSS 文件中
        extract：生产环境下是 true，开发环境下是 false,
        // 是否为 CSS 开启 source map
        sourceMap:false, //默认
    }

    // 所有 webpack-dev-server 的选项都支持
    devServer:Object,
    // 有些值像 host、port 和 https 可能会被命令行参数覆写
    // 有些值像 publicPath 和 historyApiFallback 不应该被修改，因为它们需要和开发服务器的 publicPath 同步以保障正常的工作
    devServer: {
        // 设置让浏览器 overlay 同时显示警告和错误
        overlay: {
            warnings: true,
            errors: true
        },
        // 代理服务器
        proxy:string | Object,
        proxy: 'http://localhost:4000',
        proxy: {
            '/api': {
                target: '<url>',
                ws: true,
                changeOrigin: true
            },
            '/foo': {
                target: '<other_url>'
            }
        }
    },

    // 是否为 Babel 或 TypeScript 使用 thread-loader。该选项在系统的 CPU 有多于一个内核时自动启用，仅作用于生产构建
    parallel:require('os').cpus().length > 1, //默认

    // 向 PWA 插件 传递选项
    pwa:Object,

    // 这是一个不进行任何 schema 验证的对象，因此它可以用来传递任何第三方插件选项
    pluginOptions:Object,
    pluginOptions: {
        foo: {
          // 插件可以作为 `options.pluginOptions.foo` 访问这些选项。
        }
    }
}