webpack构建多页面工程

最新推荐文章于 2022-09-26 10:02:33 发布

原创最新推荐文章于 2022-09-26 10:02:33 发布 · 349 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#多页面 #js #webpack

大前端专栏收录该内容

12 篇文章

订阅专栏

本文探讨了在工程中使用多个单页面应用（SPA）作为不同模块或端口的策略，重点介绍了如何利用webpack进行多页面构建，确保各页面独立且拥有各自的运行环境。文章还分享了一种自动识别并生成entry的实用方法，通过遍历指定目录下的特定文件来实现。

很多时候一个工程需要多个单页面应用（多入口），用于不同的模块，或者不同的端。

1.注意点：webpack构建出来的多页面，每个页面都是不相关的，js运行环境不同，window对象不同，如果是Vue，那么每个页面的vue实例不同，每个vue实例都有自己的vuex、router。

2.根据文件目录自动生成entry

目录结构：

代码：

let entryFileType = 'index.js';

let getEntry = () => {
  glob.sync(`./src/pages/**/${entryFileType}`).forEach(_path => {
    const chunk = _path.split('./src/pages/')[1].split(`/${entryFileType}`)[0];
    entries[chunk] = _path;
  });
  return entries;
};

参考：

https://juejin.im/post/5b9491a6f265da0ab5035df8

https://juejin.im/entry/5a463e2bf265da4321545ed1

https://juejin.im/post/5cdfcd4f6fb9a07ed36e7958#heading-0

https://juejin.im/post/5a8e3f00f265da4e747fc700