webpack4构建多页应用，了解一下

点我看看~
用webpack构建多页应用可以有2种思路，多页面单配置 vs. 多页面多配置。
本例子采用多页面单配置，即在单页应用配置的基础上，主要把entry和plugins中的html-webpack-plugin进行改造即可。

多页面单配置的优点在于，不同页面可以共享相同代码，容易实现长缓存。缺点主要是随着项目的日渐庞大，打包速度会有明显下降；而多页面多配置的有点在于，打包速度会将对快很多而且有parallel-webpack插件可以使用，但是它不容易实现共享代码的长缓存，它会把页面加载的成本转移到用户那里。

本文着重介绍如何用webpack构建多页应用（采用多页面单配置的方式），所以webpack的基本配置不会详述~ 若要了解webpack相关配置可移步----基于vue2.x的webpack配置(生产环境~)

先介绍页面结构：

image.png

首先，多页应用必定有多个entry。那么根据上面项目目录，如何生成多个entry呢？上图：

image.png

image.png

可以看到我们生成的entries长这样：

{
  "views/template001/yz": "....(省略前面) /src/views/template001/yz/yz.js", 
  "views/template002/yz": "....(省略前面) /src/views/template002/yz/yz.js"
}

//因此，[name]对应的值便是如下：
  "views/template001/yz"
  "views/template002/yz"

既然项目结构如此，那么接下来要考虑的是，我们希望打包后生成的目录结构是怎样，只有先设计好了目录结构，方可动手操作。

在此例中，我希望打包结果的项目路径是这样的：

-dist
  -views （----放置html文件）
     -template00X
        -XX.html
  -css    （----放置css文件）
    -views
      -template00X
        -XX.css
  -js    （----放置js文件）
    -views
      -template00X
        -XX.js

ok，至此我们明确了打包后的目录结构。接下来，我们再看看什么会影响打包后的目录结构或说页面文件的引用路径呢？

几个关键词：

output: {
    path: //打包生成的根目录，一般取名为dist
    filename: // [name]和entry对象的key一一对应，但是我们可以对路径进行修改，如'js/[name].js'，即统一放在js目录下。如果在我们这个多页应用项目里不写filename，它会影响打包后webpack运行时的manifest.js文件的路径。因为webpack把manifest文件当做初始文件加载，不会放在动态加载的chunk里面。
    publicPath: // 这代表外部访问静态资源文件的路径
    chunkFilename: // 动态加载的文件，在这里指vendor和各自页面需要引用的js文件
}

··············································我是关键的分界线··············································

运用html-webpack-plugin可以自定义打包结果的位置等，在此例中它是如下设置的：

image.png

通过这个配置，可以看到生成的html文件的路径是这样的：‘dist/views/template00X/yz.html’。

chunks的设置在多页应用中尤为关键，它会指明你需要将哪些js文件打包进页面中。如果不指明，则webpack会默认把打包生成的所有js都放进每个多页面中。

接下来，我们来设置静态资源的打包路径。上图：

image.png

这里需要注明config/index.js里面build和dev的assetsPublicPath:

image.png

注意，assetsPublicPath代表的是output中的publicPath。这意味着，它表示的是静态资源引用的源路径。在此项目中，publicPath是"../../"表示要访问到资源文件，需要从html文件向上返回两个层级，因为这个项目的目录结构是"views/template00X/"。还记得吗？（不记得？往上看entries生成的路径是啥样的。）

弄明白了这一点，就知道要访问静态资源文件，需要返回两级，到dist这个根目录级别，然后再去找对应的资源。

上面我们已经设置好js的访问路径，但是css的打包路径得在mini-css-extract-plugin这个插件中设置，如下：

image.png

据此，我们已经设置多页应用的基本配置啦。上打包后的dist目录：

image.png

需要说明的是manifest.js和vendor.chunk.js为什么直接放在js层级下？首先，我们设置了代码分割。第二，我个人粗浅的理解是~ manifest.js是页面运行时首先必须执行的文件，因此它不会是动态引入的chunk，因而打包在第一层级。至于为什么会放在dist/js/目录下呢？记得前面我们在output的filename中设置了"js/[name].js"么。而vendor之所以是chunk级别的js，首先是因为它是项目运行所依赖的文件 ，但它可以不必是页面最开始就要加载的。下面放代码分割的配置：

image.png

塔拉~ 今日份的笔记就到这里啦，晚安~