• 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 }) ], } }
  • 相关阅读:
    第10组 Beta冲刺 (3/5)
    第10组 Beta冲刺 (2/5)
    第10组 Beta冲刺 (1/5)
    软工实践个人总结
    第03组 每周小结(3/3)
    第03组 每周小结(2/3)
    第03组 每周小结(1/3)
    第03组 Beta冲刺 总结
    第03组 Beta冲刺 (5/5)
    第03组 Beta冲刺 (4/5)
  • 原文地址:https://www.cnblogs.com/wxx-17-5-13/p/13644440.html
Copyright © 2020-2023  润新知