cli3-webpack相關配置

cli3-webpack相關配置

學習資源

cli官網資料
其他參考資料

不自己敲敲，還是不靠譜

cli3中webpack的配置文件是根目錄下的vue.config.js，默認是沒有的，需要配置的時候，手動創建，需要哪項就添加哪項

module.exports = {
  //生成環境部署路徑，默認爲'/'
  publicPath: process.env.NODE_ENV === 'production'
    ? '/wap/'
    : '/'
  //當運行 build 時生成的生產環境構建文件的目錄
  outputDir:'dist',
 //放置生成的靜態資源 (js、css、img、fonts) 的 (相對於 outputDir 的) 目錄
  assetsDir:'',
 //指定生成的 index.html 的輸出路徑 (相對於 outputDir)
  indexPath:'index.html',
 //默認情況下，生成的靜態資源在它們的文件名中包含了 hash 以便更好的控制緩存,可設置false關閉
  filenameHashing:true,
  //在 multi-page （多頁面應用）模式下構建應用
  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](https://github.com/webpack-contrib/eslint-loader) 在每次保存時 lint 代碼
 lintOnSave:true,
 //調整 webpack 配置最簡單的方式就是在 vue.config.js 中的 configureWebpack 選項提供一個對象：1.如果這個值是一個對象，則會通過 [webpack-merge](https://github.com/survivejs/webpack-merge) 合併到最終的配置中
  configureWebpack: {
    plugins: [
      new MyAwesomeWebpackPlugin()
    ]
  },
//2、如果這個值是一個函數，則會接收被解析的配置作爲參數。該函數及可以修改配置並不返回任何東西，也可以返回一個被克隆或合併過的配置版本。
  configureWebpack: config => {
    if (process.env.NODE_ENV === 'production') {
      // 爲生產環境修改配置...
    } else {
      // 爲開發環境修改配置...
    }
  },
  devServer: {
    proxy: 'http://localhost:4000',//這會告訴開發服務器將任何未知請求 (沒有匹配到靜態文件的請求) 代理到http://localhost:4000
  }
}