构建多页面应用——单个页面的处理

时间 2019-11-16

标签构建页面应用单个处理繁體版

原文原文链接

在看这篇文章以前，须要你对构建多页面应用有必定的基础认识，若是没有的话，能够先参考这篇文章webpack 构建多页面应用。css

多页面应用是由一个个独立的页面组成。所以，细粒度的处理一个个单页面是构建单页面框架以后的一个重要实现。html

由于所涵盖的知识点较碎，因此就不按照页面的位置结合组成元素来说，如：head, body, script等。这里主要介绍head。由于script操做其实就是上一篇文章中已经介绍过的js操做，而body由于内容较多，须要另起一篇文章。前端

页面的头部

在上一篇文章中，咱们讲述了如何用html-webpack-plugin 生成一个html文件，其中使用了两个配置项chunks，filename，前者指代页面所要引入的js模块，也就是咱们常见的html页面中的<script src="..."></script>形式，后者指代文件的名字。webpack

那么，在这一部分，要说的就是如何给不一样的页面配置生成不一样的页面<head>...</head>。咱们都知道页面头部包括title、link/style、meta、script 这四部分组成，尤为前三者居多。git

固然，在web前端开发中js很强大，咱们能够用js直接控制，在不一样页面的入口js文件中写相应的js代码。github

这种方法虽然可行，但维护起来比较麻烦，当你修改的时候，你须要查找一个个页面。web

相对来说，使用html-webpack-plugin提供的配置项，会使你的开发工做变得简单起来。json

`html-webpack-plugin` 插件的配置项

title 选项能够为页面指定名字，meta 选项能够为页面指定html文档关联信息，如：描述，做者等，favicon 能够为页面添加一个小图标。修改 webpack.config.js，代码以下：segmentfault

...
nnew HtmlWebapckPlugin({
  /* inital page */
  filename: 'index.html',
  chunks: ['index'],
  /* page head */
  title: 'index',
  meta: {
    'description': '这是首页',
    'keywords': 'webpack, multi-page, 首页',
    'author': 'https://github.com/lvzhenbang/
  },
  favicon: './assets/19884132.jpg'
})
...

这样头部经常使用的三个元素咱们已经解决了两个。那么接下来就是解决link这个元素的。框架

注：有一个比较特殊的就是html页面图标<link rel="shortcut icon" href="19884132.jpg"> ，咱们使用 html-webpack-plugin 插件的 favicon 选项已经解决。

`link` 和 `style` 部分的处理

这两个元素经常被用来处理样式。link 处理外部样式，style 处理内联样式。

注：不少人会误解，或曲解，这里的样式处理是这样的：在定义的页面入口文件，或者页面入口文件引用的文件中，引入css文件，webapck会将这些样式之内联的形式或者link的形式注入到生成的html页面中。

这样咱们的应用的目录结构就变成以下这样（本片文章使用以下的目录结构，它也介绍了各个js文件对css文件的引用）：

├── src
│ ├── common // 公用的模块
│ │ ├── a.js // 引用了a.css
│ │ ├── b.js // 引用了b.css
│ │ ├── c.js // 引用了c.css
│ │ ├── d.js
├── assets // 静态资源
│ ├── 19224132.jpg // 用来作页面图标
│ ├── css
│ │ ├── a.css
│ │ ├── b.css
│ │ ├── c.css
│ │ ├── main.css
│ │ ├── abutus.css
│ ├── uttils // 工具
│ │ ├── load.js // 工具代码load.js
│ ├── index.js // 主模块index.js (包含a.js, b.js, c.js, d.js)，引用了main.css
│ ├── aboutUs.js // 主模块aboutus.js (包含a.js, b.js)，引用了main.css, aboutus.css
│ ├── contactUs.js // 主模块contactus.js (包含a.js, c.js)，引用了main.css
├── webpack.config.js // css js 和图片资源
├── package.json
├── yarn.lock

处理为内联样式

若是是webpack3.x 推荐使用 css-loader，style-loader，extract-text-webpack-plugin；若是是webapck4.x推荐使用的 css-loader, mini-css-extract-plugin。

webpack3.x与webapck4.x都同样，修改webpack.config.js以下：

...
module: {
  rules: [
    {
      test: /\.css$/,
      use: [
        'style-loader',
        'css-loader'
      ]
    }
  ]
},
...

由于mini-css-extract-plugin是专门为webpack4.x设计的，若是webapck3.x使用它会报错。

处理为外部连接（link）

webpack3.x中webpack.config.js修改以下：

...
const ExtractTextPlugin = require('extract-text-webapck-plugin')
...
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: 'css-loader'
        })
      }
    ]
  },
  plugins: [
    ...
    new ExtractTextPlugin({
      filename: '[name].css'
    })
  ]

webpack4.x中webpack.config.js修改以下：

...
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
...
 module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader'
        ]
      }
    ]
  },
  plugins: [
    ...
    MiniCssExtractPlugin()
  ],

从js文件中分离出css文件，webpack3.x借助于extract-text-webpack-plugin，webpack4.x借助于mini-css-extract-plugin，前者给不一样的css代码块命名须要在extract-text-webapck-plugin的示例中配置，它使用的是内置的CommonsChunkPlugin插件的拆分原则，后者不须要配置分离css代码块的名字选项，后者借助于SplitsChunkPlugin插件的拆分原则。

因此，它们的分离形式与js代码块一致。

webpack3.x为每一个入口点生成了一个css文件，并提取了它们的公共代码生成了一个新的css文件；webapck4.x为每一个入口生成了一个css文件，并提取并生成了这些文件相互之间的公共文件（它和前者不一样，后者更精细化，只要是某一个或者几个文件有公共代码就提取出来，而后生成新的文件）。

为何将css文件和js文件分的这么细？是由于这样能够显著的减少首次加载页面时请求文件的大小（lazyload），可是这样作会增长HTTP的请求次数。

在多页面应用的过程当中，有的人喜欢将全部的css放在一个或两个文件中，而不是像本文中那样为每一个页面生成一个css文件，包括它们之间的共用文件。但在多页面应用中，这样精密的细分也有其好处。

相对来讲，使用CommonsChunkPlugin拆分的css模块更合理些，而使用SplitsChunkPlugin拆分的css模块，则过于细化。

至于如何取舍，还须要根据实际状况来定。

固然，这里面还有一些小的问题须要优化，后期我会视状况来写相应的文章描述。

源代码

webpack3.x multi-page

webpack4.x multi-page

构建多页面应用——单个页面的处理

页面的头部

html-webpack-plugin 插件的配置项

link 和 style 部分的处理

源代码

构建多页面应用系列文章

`html-webpack-plugin` 插件的配置项

`link` 和 `style` 部分的处理