webpack 多頁面分頁打包(vuecli3/react)

一 vuecli3 分頁打包

通過配置vue.config.js實現

"use strict";
const titles = require("./title.js");    //每個頁面文件名及對應的頁面title
const glob = require("glob");
const fs = require("fs");
const pages = {};
const path = require("path");
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");

function resolve(dir) {
  return path.join(__dirname, dir);
}


console.log(' process.argv', process.argv)       //當運行命令后添加  pageKey=文件名  時可以用process.argv獲取
console.log(' process.env.npm_config_argv', process.env.npm_config_argv)       //當運行命令后添加  --pageKey=文件名  時可以用process.env.npm_config_argv獲取
// npm指令需要讀取 process.env.npm_config_argv
const argv = JSON.parse(process.env.npm_config_argv);
const config = {};
// 獲取自定義參數
let idx = 2;
const cooked = argv.cooked;
const length = argv.cooked.length;
while ((idx += 2) <= length) {
    config[cooked[idx - 2]] = cooked[idx - 1];
}
//自定義參數獲取獲取單獨要運行（打包）的頁面對應的文件名 參考vuecli自定義參數
let pageKey = config['--pageKey']     

if(pageKey){
  pages[pageKey] = {
    entry: `./src/pages/${pageKey}/app.js`,
    template: "public/index.html",
    title: titles[pageKey],
    chunks: ["chunk-vendors", "chunk-common", pageKey]
  };
}else{
//因為每個頁面的入口文件是app.js，通過全局變量讀取所有文件夾下的app.js生成page對象
//每個頁面都放在對應的文件夾里，文件夾名對應着打包后的文件名
  glob.sync("./src/pages/**/app.js").forEach(path => {
    const chunk = path.split("./src/pages/")[1].split("/app.js")[0];
    pages[chunk] = {
      entry: path,
      template: "public/index.html",
      title: titles[chunk],
      chunks: ["chunk-vendors", "chunk-common", chunk]
    };
  });
}


module.exports = {
  pages,
　...

};

2 webpack+reack 分頁分文件夾打包

const webpack = require('webpack')
const titles = require("./title.js")
const glob = require('glob')
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')

const processUrl = {
  dev: {
    NODE_ENV: '"dev"',
    BASE_API: '"http://xxx/api/"'
  },
  test: {
    NODE_ENV: '"test"',
    BASE_API: '"http://xxx/api/"'
  },
  production:{
    NODE_ENV: '"production"',
    BASE_API: '"http://xxx/api/"'
  }
}
let env_config = processUrl[process.env.NODE_ENV];

module.exports = function (env = {}, argv) {
  const pageTitle = argv.pageTitle
  let entryObj = {}
  let plugin = []
  if (!pageTitle) {  
　　//默認全局
    glob.sync('./src/views/**/index.jsx').forEach(function (filepath) {
      const chunk = filepath.split("./src/views/")[1].split("/index.jsx")[0]
      entryObj[chunk] = filepath
      plugin.push(new HtmlWebpackPlugin({
        filename: chunk + '/' + chunk + '.html',
        title: titles[chunk],
        template: './public/index.html',
        chunks: ["chunk-vendors", "chunk-common", chunk]
      }))
    })
  } else {
    entryObj[pageTitle] = `./src/views/${pageTitle}/index.jsx`
    plugin.push(new HtmlWebpackPlugin({
      filename: pageTitle + '/' + `${pageTitle}.html`,
      title: titles[pageTitle],
      template: './public/index.html',
      chunks: ["chunk-vendors", "chunk-common", pageTitle]
    }))
  }
  return {
    mode: "production", // 通過 mode 聲明生產環境
    entry: entryObj,
    output: {
      // publicPath: __dirname + "/dist/", // 打包后資源文件的引用會基於此路徑
      path: path.resolve(__dirname, `./dist`),
      filename: `[name]/[name].js`
    },
    module: {
   　　...
    },
    
    plugins: [
      new CleanWebpackPlugin(), 
      new MiniCssExtractPlugin({       //css文件處理
        filename: './[name]/[name][contenthash:8].css' // 輸出文件名和地址
      }),
      ...plugin,
      // 配置process.env變量
      new webpack.DefinePlugin({
        "process.env": env_config
      })
    ],
  }
}