webpack没你想的那么难(四):多页面工程改造

@songhlc 2017-12-14 01:29:33发表于 yonyouyc/blog

前面三期的内容已经把单页面应用(一个程序入口的webpack工程配置)给介绍完了,如果是多页面应用,webpack配置该怎么改造?

多页面应用

和单页面应用只需要一个entry(入口文件)不同,多页面的访问路径应该是类似下面这样

http://www.xxx.com/page1/index.html
http://www.xxx.com/page2/index.html
http://www.xxx.com/page3/index.html

这意味着开发目录应该是类似这样的

src
    pages
        page1
            index.html
            index.js
        page2
            index.html
            index.js
        page3
            index.html
            index.js

entry变化

单页面应用配置

module.exports = {
  entry: {
    app: './src/index.js'
  }
}

多页面应用的配置

module.exports = {
  entry: {
    page1: './src/page1/index.js',// 增加了多个入口
    page2: './src/page2/index.js',
    page3: './src/page3/index.js'
  },

HtmlWebpackPlugin变化

入口变化了,我们最终的目的是一个index.html对应一个入口文件,所以需要对plugins做修改

单页面应用配置

plugins: [
    // 单页面只指定了一个模板文件
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'index.html',
      inject: true
    })
]

多页面应用的配置

plugins: [
    new HtmlWebpackPlugin({
      filename: 'page1/index.html',
      template: './src/page1/index.html',
      chunks: ['page1'],
      inject: true
    }),
    new HtmlWebpackPlugin({
      filename: 'page2/index.html',
      template: './src/page2/index.html',
      chunks: ['page2'],
      inject: true
    }),
    new HtmlWebpackPlugin({
      filename: 'page3/index.html',
      template: './src/page3/index.html',
      chunks: ['page3'],
      inject: true
    })
]

注意事项:chunks需要指定注入这个html页面的入口文件是哪个,和entry里面的key是一一对应的,实际使用中chunks不只有入口文件,还会有一些vendor和mainfest配合CommonsChunkPlugin来进行代码抽取和优化

将entry的配置进行抽象

类似咱们友云采的多页面工程一样,我们需要把所有入口都抽象到一个models.js里如下:

var models = {
    page1: '页面1',// value既可以表示当前页面是哪个也可以后续注入到htmlwebpackplugin里做为页面title
    page2: '页面2',
    page3: '页面3',
}

同样entry里只要写一个getEntry的方法,另外再将plugins也进行动态生成,就完成多页面工程的配置了。

进阶

template里的index.html还可以进行抽象,把所有头部尾部等公共部分进行抽象

目录结构:

src
    page1
        template.html
        index.js
    page2
        template.html
        index.js
    index.html

page1/template.html:

<y-box>
    <y-boxcontent>
        your page content
    </y-boxcontent>
</y-box> 

page1/index.js

import template from './template.html'
document.getElementById("app").innerHTML = template

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>your title</title>
    <!-- your common css -->
</head>
<body>
<div id="app"></div>
<!-- your common js -->
</body>
</html>

下期预告:webpack构建性能优化,会基于招投标的工程进行webpack1.x->webpack3.x的改造升级