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

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

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

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

先介绍页面结构：

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

能够看到咱们生成的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能够自定义打包结果的位置等，在此例中它是以下设置的：
经过这个配置，能够看到生成的html文件的路径是这样的：‘dist/views/template00X/yz.html’。

chunks的设置在多页应用中尤其关键，它会指明你须要将哪些js文件打包进页面中。若是不指明，则webpack会默认把打包生成的全部js都放进每一个多页面中。

接下来，咱们来设置静态资源的打包路径。上图：
这里须要注明config/index.js里面build和dev的assetsPublicPath:

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

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

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

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

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

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