深入浅出webpack进修(15)--治理多个单页运用

2024年5月30日 146次阅读 来源: fsrookie

在现实运用中一个完全的体系不会把一切的功用都做到一个网页中，由于这会致使网页机能不佳。现实的做法是根据功用模块划分红多个单页运用，每一个单页运用天生一个HTML文件。之前我们处理了自动化天生HTML文件，接下来继承革新上一节的例子：

  1. 项目现在共有两个单页运用构成，一个是主页index.html, 一个是login.hml
  2. 多个单页运用之间会有大众代码部份，须要将这些大众代码部份抽离出来放到零丁的文件中防备反复加载。
  3. 跟着营业的生长，背面能够会不停的到场新的单页运用，然则每次新到场单页运用不能去修正构建相干的代码。

根据上节的思绪，能够要为每一个单页运用设置一段以下代码：

new WebPlugin({
    template: "./template.html", //HTML模板文件地点的文件途径
    file: "login.html" //输出的HTML的文件称号
})

而且把页面对应的进口到场到entry设置项中，就像如许：

entry: {
    index: "./page/index/index.js", //页面index.html的进口文件
    login: "./page/login/index.js"， //页面login.html的进口文件
}

当有新页面到场时就须要修正webpack设置文件，新插进去一段以上代码，这会致使构建代码难以保护而且易错。

处理方案

上一节中的web-webpack-plugin插件也内置了这个处理办法，上一节只用了他的webPlugin，这节将运用它的AutoWebPlugin来处理以上题目。
项目源码构造以下：

├── pages
│   ├── index
│   │   ├── index.css // 该页面零丁须要的 CSS 款式
│   │   └── index.js // 该页面的进口文件
│   └── login
│       ├── index.css
│       └── index.js
├── common.css // 一切页面都须要的大众 CSS 款式
├── google_analytics.js
├── template.html
└── webpack.config.js

从目次构造中能够看出以下几点请求：

  1. 一切单页运用的代码都须要放到一个目次下：比方pages目次下；
  2. 一个单页运用一个零丁的文件夹，比方末了胜出index.html相干的代码都在index目次下
  3. 每一个单页运用的目次下都有一个index.js文件作为进口实行文件。

虽然 AutoWebPlugin 强制性的划定了项目部份的目次构造，但从实战经验来看这是一种文雅的目次范例，合理的拆分了代码，又能让新人疾速的看懂项目构造，也轻易往后的保护。

webpack设置文件修正以下：

const { AutoWebPlugin } = require("web-webpack-plugin")

// 运用本文的主角 AutoWebPlugin，自动寻觅 pages 目次下的一切目次，把每一个目次算作一个单页运用
const autoWebPlugin = new AutoWebPlugin('pages', {
  template: './template.html', // HTML 模版文件地点的文件途径
  postEntrys: ['./common.css'],// 一切页面都依靠这份通用的 CSS 款式文件
  // 提掏出一切页面大众的代码
  commonsChunk: {
    name: 'common',// 提掏出大众代码 Chunk 的称号
  },
});

module.exports = {
  // AutoWebPlugin 会为寻觅到的一切单页运用，天生对应的进口设置，
  // autoWebPlugin.entry 要领能够获取到一切由 autoWebPlugin 天生的进口设置
  entry: autoWebPlugin.entry({
    // 这里能够到场你分外须要的 Chunk 进口
  }),
  plugins: [
    autoWebPlugin,
  ],
};

AutoWebPlugin会找出pages目次下的2个文件夹index和login，把这两个文件夹算作两个单页运用。而且分别为每一个单页运用天生一个Chunk设置和WebPlugin设置。每一个单页运用的Chunk称号就即是文件夹的称号，也就是说autoWebPlugin.entry()要领返回的内容现实上是：

{
  "index":["./pages/index/index.js","./common.css"],
  "login":["./pages/login/index.js","./common.css"]
}

但这些事变 AutoWebPlugin 都邑自动为你完成，你不必费心，邃晓大抵道理即可。

    原文作者：fsrookie
    原文地址: https://segmentfault.com/a/1190000013753571
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞