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
      })
    ],
  }
}