dist
├── static
│   ├── css
│   ├── js
│   ├── img
│   ├── dll
│   └── ...
└── index.html
└── ...
└── ...

dist
├── page(這里名字打包出哪個(gè)文件夾自己配置)
│   ├── css
│   ├── js
│   ├── img
│   ├── index.html
│   └── user.html
│   └── setting.html
│   └── ....html
│   └── ....html
.   ....
.   ....
.   ....

module.exports = {
  pages: {
    index: {
      // page 的入口
      entry: 'src/index/main.js',
      // 模板來源
      template: 'public/index.html',
      // 在 dist/index.html 的輸出
      filename: 'index.html',
      // 當(dāng)使用 title 選項(xiàng)時(shí)，
      // template 中的 title 標(biāo)簽需要是 <title><%= htmlWebpackPlugin.options.title %></title>
      title: 'Index Page',
      // 在這個(gè)頁面中包含的塊，默認(rèn)情況下會(huì)包含
      // 提取出來的通用 chunk 和 vendor chunk。
      chunks: ['chunk-vendors', 'chunk-common', 'index']
    },
    // 當(dāng)使用只有入口的字符串格式時(shí)，
    // 模板會(huì)被推導(dǎo)為 `public/subpage.html`
    // 并且如果找不到的話，就回退到 `public/index.html`。
    // 輸出文件名會(huì)被推導(dǎo)為 `subpage.html`。
    subpage: 'src/subpage/main.js'
  }
}

pages
└── index-skeleton.html
└── indexApp.html
└── app.js

const glob = require('glob')
const fs = require('fs');
let titleObj = {};
// 統(tǒng)一配置多頁

// 這里是遍歷src下面的pages 下面每個(gè)文件夾(例如index)下以xxxApp.vue 命名的vue頁面
glob.sync('./src/pages/**/*App.vue').forEach((path) => {
    // 遍歷path
    console.log(path,'path')
   //./src/pages/index/indexApp.vue path
  
  // 找到文件名
  const fileName = path.split('/')[path.split('/').length - 1];
   console.log(fileName,'fileName')
   // indexApp.vue fileName
  
  // 去掉App 后綴
  const chunk = path.substring(12, path.indexOf('/' + fileName));
    console.log(chunk,'chunk')
   // index chunk
 
  // 這里是給每個(gè)頁面設(shè)置標(biāo)題,需要在indexApp.vue設(shè)置一個(gè)變量pageTitle
  let fileContent = fs
    .readFileSync(path, { encoding: 'utf-8' })
    .toString()
    .replace(/\r\n/g, '');
  fileContent = fileContent.substr(fileContent.indexOf('pageTitle:'));
  fileContent = fileContent.substr(0, fileContent.indexOf(','));

  fileContent =
    fileContent.indexOf('"') > 0
      ? fileContent.substr(fileContent.indexOf('"') + 1)
      : fileContent.substr(fileContent.indexOf("'") + 1);

  fileContent =
    fileContent.indexOf('"') > 0
      ? fileContent.substr(0, fileContent.indexOf('"'))
      : fileContent.substr(0, fileContent.indexOf("'"));
  titleObj[chunk] = fileContent ? fileContent : '標(biāo)題';
});


// 這里是遍歷src下面的pages 下面每個(gè)文件夾(例如index)下以app.js
glob.sync('./src/pages/**/app.js').forEach((path) => {
  //打包js
  const chunk = path.split('./src/pages/')[1].split('/app.js')[0];
  const tmp = chunk.split('/');
  // 模版html,如果都是一樣的,可以直接使用public下index.html,如果要設(shè)置標(biāo)題的話,需要每個(gè)頁面都有一個(gè)html模版,如果不需要,就可以使用同一個(gè),看個(gè)人習(xí)慣
  let templateUrl =
    'src/pages/' + chunk + '/' + tmp[tmp.length - 1] + '-skeleton.html';

  pages[chunk] = {
    entry: path,//入口文件
    template: templateUrl,//模版html
    title: titleObj[chunk] ? titleObj[chunk] : '標(biāo)題',//標(biāo)題
    filename: chunk.replace(/\//g, '-') + '.html',//打包出來的html名字
    chunks: ['chunk-vendors', 'chunk-common', chunk],//依賴包
  };
});
module.exports = {
  // 選項(xiàng)...
  publicPath: process.env.NODE_ENV === 'production'
    ? '/dist/'
    : '/',
  pages,
}

<title><%= htmlWebpackPlugin.options.title %></title>

module.exports = {
  //...
 //...
  optimization: {
    splitChunks: {
      chunks: 'async', // 代碼分割時(shí)對異步代碼生效，all：所有代碼有效，inital：同步代碼有效
      minSize: 30000, // 代碼分割最小的模塊大小，引入的模塊大于 30000B 才做代碼分割
      maxSize: 0, // 代碼分割最大的模塊大小，大于這個(gè)值要進(jìn)行代碼分割，一般使用默認(rèn)值
      minChunks: 1, // 引入的次數(shù)大于等于1時(shí)才進(jìn)行代碼分割
      maxAsyncRequests: 6, // 最大的異步請求數(shù)量,也就是同時(shí)加載的模塊最大模塊數(shù)量
      maxInitialRequests: 4, // 入口文件做代碼分割最多分成 4 個(gè) js 文件
      automaticNameDelimiter: '~', // 文件生成時(shí)的連接符
      automaticNameMaxLength: 30, // 自動(dòng)生成的文件名的最大長度
      cacheGroups: {
        vendors: {
          test: /[\\/]node_modules[\\/]/, // 位于node_modules中的模塊做代碼分割
          priority: -10 // 根據(jù)優(yōu)先級決定打包到哪個(gè)組里，例如一個(gè) node_modules 中的模塊進(jìn)行代碼
        }, // 分割，，既滿足 vendors，又滿足 default，那么根據(jù)優(yōu)先級會(huì)打包到 vendors 組中。
        default: { // 沒有 test 表明所有的模塊都能進(jìn)入 default 組，但是注意它的優(yōu)先級較低。
          priority: -20, //  根據(jù)優(yōu)先級決定打包到哪個(gè)組里,打包到優(yōu)先級高的組里。
          reuseExistingChunk: true // //如果一個(gè)模塊已經(jīng)被打包過了,那么再打包時(shí)就忽略這個(gè)上模塊
        }
      }
    }
  }
};

    optimization: {
      minimize: false,
      splitChunks: {
        cacheGroups: {// 緩存分組
          common: {// 公共的模塊
            name: 'chunk-common',//命名要和上面chunks定義的一致
            chunks: 'initial',
            minSize: 1,// 大小限制
            priority: 0,
            minChunks: 8,// 最少復(fù)用過幾次
          },
          // 打包第三方庫的文件
          vendor: {
            name: 'chunk-vendors',//命名要和上面chunks定義的一致
            test: /[\\/]node_modules[\\/]/,
            chunks: 'initial',
            priority: 10,// 權(quán)限更高，優(yōu)先抽離，重要！??！
            minChunks: 8,
          },
        },
      },
    },

let scssVariables = require('./src/scss/variables.scss.js');

css: {
    loaderOptions: {
      scss: {
        prependData:
          Object.keys(scssVariables)
            .map((k) => `${k.replace('_', '-')}: ${scssVariables[k]};`)
            .join('\n') + '\n',
      },
    },
  },

module.exports = {
  publicPath: './',
  //輸出目錄
  outputDir: 'fund',
  assetsDir: '',
  // 配置別名
  chainWebpack: (config) => {
    config.resolve.alias.set('@', resolve('src'));
    config.resolve.alias.set('@@', resolve('src/components'));
    config.resolve.alias.set('@assets', resolve('src/assets'));
    config.resolve.alias.set('scss', resolve('src/scss'));
  },
  // 關(guān)閉eslint校驗(yàn)
  lintOnSave: false,
  // 不生成map文件
  productionSourceMap: false,
  //文件名稱不帶hash值
  filenameHashing: false,
  devServer: {
    publicPath: '/fund/',
    proxy: {// 本地調(diào)試轉(zhuǎn)發(fā)
      '/api': {
        target: 'http://127.0.0.1:8080',
        changeOrigin: true,
        pathRewrite: {
          '^/api': '',
        },
      },
    },
  },
};