// vue.config.js
module.exports = {
  configureWebpack: {
    plugins: [
      new MyAwesomeWebpackPlugin()
    ]
  }
}

// 需要注意的是 output.path、 output.publicPath 不能配置在 configWebpack 中
// 而是应该直接配置在 `vue.config.js` 的对应选项 outputDir 、 publicPath 中
// 因为这些值在多个地方被使用，为了确保正常工作，应该统一起来

// vue.config.js
module.exports = {
  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()
      .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');
    
    // 修改插件选项
    // 将 index.html 默认的路径从 /Users/username/proj/public/index.html 改为 /Users/username/proj/app/templates/index.html
    config
      .plugin('html')
      .tap(args => {
        args[0].template = '/Users/username/proj/app/templates/index.html'
        return args;
      })
  }
}

// 这里只是举例，对于 CSS 相关 loader 来说，推荐使用上面提到的 css.loaderOptions 

vue inspect > output.js

# 只审查第一条规则
vue inspect module.rules.0

# 或者指向一个规则或插件的名字
vue inspect --rule vue
vue inspect --plugin html

# 列出所有规则和插件的名字
vue inspect --rules
vue inspect --plugins  # 会有对应注释来提示如何在vue.config.js来修改对应插件

module.exports = {
  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'
  }
  // 每个“page”应该有一个对应的 JavaScript 入口文件。其值应该是一个对象，对象的 key 是入口的名字，比如这里的 index subpage
}