webpack多页面打包通用方案

你的名字 2023-02-19 12:25 49阅读 0赞

webpack.config.js配置文件：

entry:{
     index:"./src/index",
     list:"./src/list",
     detail:"./src/detail"
    }
    new htmlWebpackPlugins({
     title: "index.html",
     template: path.join(__dirname, "./src/index/index.html"),
     filename:"index.html",
     chunks:[index]
    })

1. ⽬录结构调整

src
        index
            index.js
            index.html
        list
            index.js
            index.html
        detail
            index.js
            index.html

使⽤  glob.sync  第三⽅库来匹配路径

npm i glob -D
    
    const glob = require("glob")

//MPA多⻚⾯打包通⽤⽅案
    const setMPA = () => {
        const entry = {};
        const htmlWebpackPlugins = [];
        
        return {
            entry,
            htmlWebpackPlugins
        };
    };
    const { entry, htmlWebpackPlugins } = setMPA();

const path = require("path");
    const glob = require("glob");
    const HtmlWebpackPlugin = require("html-webpack-plugin");
    
    const setMPA = () => {
    const entry = {};
    const htmlWebpackPlugin = [];
    
      // 分析入口
      const entryFiles = glob.sync(path.join(__dirname, "./src/*/index.js"));
      // ! 过滤信息拿到入口文件名称
      console.log(entryFiles);
    
      entryFiles.map((item, index) => {
        const entryFile = entryFiles[index];   // 单独路径
        const match = entryFile.match(/src\/(.*)\/index\.js$/);
        console.log(match);
    
        const pageName = match && match[1];
        entry[pageName] = entryFile;
    
        // 配置 htmlplugin
        htmlWebpackPlugin.push(
          new HtmlWebpackPlugin({
            title: pageName,
            template: path.join(__dirname,`src/${pageName}/index.html`),
            filename: `${pageName}.html`,
            chunks: [pageName],
    		inject: true
          })
        );
      });
    
      console.log(entry);
    
      return {
        entry,
        htmlWebpackPlugin,
      };
    };
    
    const { entry, htmlWebpackPlugin } = setMPA();
    
    
    module.exports = {
      entry,
      output: {
        path: path.resolve(__dirname, "./dist"),
        filename: "[name]_[chunkhash:8].js",
      },
      mode: "development",
      plugins: [...htmlWebpackPlugin],
    };

发表评论取消回复

表情：

评论列表（有 0 条评论，49人围观）

还没有评论，来说两句吧...

相关阅读

相关 webpack 实现自动化多页面打包

一、为什么要使用自动化多页面打包二、实现三、结果 -------------------- 一、为什么要使用自动化多页面打包当我们有多个入口时，若是手动一个

布满荆棘的人生/ 2023年06月25日 14:25/ 0 赞/ 96 阅读

相关 webpack多页面打包通用方案

webpack.config.js配置文件： entry:{ index:"./src/index", list:"./src/list",

你的名字/ 2023年02月19日 12:25/ 0 赞/ 50 阅读

相关多页面项目优化webpack打包降低上线风险

目前的问题项目中有多个入口，某些入口会提供出去给其他项目使用。这就要求项目的稳定性要高，如果出了问题可能会导致其他的相关联项目也无法正常使用。（要背锅）由于目前整个

淩亂°似流年/ 2022年10月29日 01:55/ 0 赞/ 253 阅读

相关 webpack打包

进入工作空间,npm run build,打一下生产的包打包完之后,会生成一个dist目录 ![70][] static是静态文件的存放地址在config目录

╰半夏微凉°/ 2022年05月09日 05:12/ 0 赞/ 409 阅读

相关 Webpack + Vue 多页面项目升级 Webpack 4 以及打包优化

0. 前言早在 2016 年我就发布过一篇关于在多页面下使用 Webpack + Vue 的配置的文章，当时也是我在做自己一个个人项目时遇到的配置问题，想到别人也可能遇

Bertha 。/ 2022年03月30日 14:18/ 0 赞/ 617 阅读

相关 electron-vue利用webpack打包实现多页面的入口文件

项目需要在electron的项目中新打开一个窗口，利用webpack作为静态资源打包器，发现在webpack中可以设置多页面的入口，今天来讲一下我在electron中利用web

古城微笑少年丶/ 2022年01月19日 03:21/ 0 赞/ 509 阅读

相关 webpack 多页面模式配置

2018年1月3日因为工作安排，最近在搞前端目录结构 ![474883-20180103172353409-1632479497.jpg][] package.js

柔情只为你懂/ 2022年01月09日 12:43/ 0 赞/ 343 阅读

相关 WebPack打包

一、用webpack打包新建一个文件夹 webpack-demo 1. 初始化 npm 执行命令 $ npm init （只生成一个package.json文件） !

一时失言乱红尘/ 2021年11月16日 23:40/ 0 赞/ 664 阅读

相关 webpack多页面打包配置

单页面应用：整个应用里面只有一个html文件。现在主流的框架，vue，react都是单页面应用。所以webpack绝大部分都是对单页面打包。那么webpack如何对多页面进

柔光的暖阳◎/ 2021年10月25日 12:34/ 0 赞/ 541 阅读

相关 webpack4 多页面打包

方式一: 将entry修改为对象形式的多入口方式,每个入口对应对应一个html-webpack-plugin 通过html-webpack-plug

我会带着你远行/ 2021年07月24日 11:00/ 0 赞/ 569 阅读