Webpack Multiple plugin

这是一个组成多页面Webpack的插件，基于html-webpack-plugin，内部使用了ejs插件进行模板编译

可以让webpack更快开发多页应用，也可以结合vue进行组件化开发

这个插件只提供多页面输出，需要自己添加loader，例如css-loader，babel-loader等，可以自行搭配其他插件

Options Plugin

插件主要配置

| Name | Type | Default | Description | | :--------------------: | :-----------: | :--------------------------------------------: | :----------------------------------------------------------: | | root | {String} | null | 设置根变量 | | outputTemplatePath | {String} | [PATH].html | 输出所有模板的文件名称 | | outputChunkPath | {String} | null | 输出的所有chunk的路径 | | chunkName | {String} | pages/[PATH] | chunk生成的名字 | | pages | {Array} | [] | 页面的数据信息 | | commons | {Array} | [] | 公共模块的chuank，当然也可以自己定义 | | defaultCommonName | {String} | null | 默认公共模块的chunk名称 | | injectVariable | {Boolean} | true | 是否注入变量 | | defaultCommonOrder | {Number} | 0 | 0 : start， 1: end 根据不同的场景配置默认公共文件的顺序，（其他的公共的不进行排列） | | templateJoinEntry | {Boolean} | false | 是否将模板加入入口 | | scriptLoading | {String} | WebpackMultiplePlugin.OPTIONS.SCRIPT_DEFER | 加载script的方式 | | minify | {Boolean} | true | 是否压缩 | | defaultEntryPath | {String} | [TEMPLATE_DIR]/index.js | 默认没有设置entry的时候引入 |

Pages Options

页面的配置信息

| Name | Type | Default | Description | | :--------------------: | :----------------------------------: | :-------------------------------------------: | :------------------: | | path | {String} | | 页面输出的路径 | | template | {String,Function(context,path)} | | 页面的模板文件 | | scriptLoading | {String,Function(context,path)} | WebpackMultiplePlugin.OPTIONS.INJECT_HEAD | script标签的引入方式 | | entry | {String,Function(context,path)} | [PATH]/index.js | 入口文件的路径 | | chunks | {Array,Function(context,path)} | [] | 额外的chunk | | data | {Object,Function(context,path)} | {} | 传递给ejs模板的数据 | | inject | {String,Function(context,path)} | WebpackMultiplePlugin.OPTIONS.INJECT_HEAD | 注入的html位置 | | outputChunkPath | {String,Function(context,path)} | | 单独的文件chunk路径 | | outputTemplatePath | {String,Function(context,path)} | | 单独的模板路径 | | minify | {Boolean,Function(context,path)} | true | 是否压缩 | | chunkName | {String,Function(context,path)} | pages/[PATH] | chunk名称 |

Common Options

公共模块的信息定义

| Name | Type | Default | Description | | :------------: | :---------------------------------: | :-----: | :--------------: | | name | {String} | | 公共的chunk名称 | | entry | {String,Function(context,PATH)} | | 入口文件的路径 | | outputPath | {String} | | 输出的公共文件名 |

Usage

此插件为你生成多页面的解决方案，你只要在plugins实例化这个插件即可

demonstration

new WebpackMultiplePlugin({
    // 模板的文件输出名称,
    outputTemplateName: '[PATH].html',
    // chunk位置
    outputChunkName: "pages/[PATH]/[PATH]",
    // 公共默认模块的名称
    defaultCommonName: 'common/common',
    commons: [
        {
            // 与上面的是对应的
            name: "common/common",
            entry: "./src/common.js"
        },{
            name: "common/b",
            entry: "./src/aa.js"
        }
    ],
    // 页面的配置文件
    pages:[
        {
            PATH: "index",
            template: './src/pages/index/aa.ejs',
            entry: './src/pages/index/aa.js'
            outputTemplateName: '',
            chunks: ["common/b"]
        }
    ]
});

Template (EJS)

此插件可以使用ejs语法

index.ejs

<% aa %>

webpack plugin

new WebpackMultiplePlugin({
    // 模板的文件输出名称,
    outputTemplateName: '[PATH].html',
    // chunk位置
    outputChunkName: "pages/[PATH]/[PATH]",
    // 公共默认模块的名称
    defaultCommonName: 'common/common',
    commons: [
        {
            // 与上面的是对应的
            name: "common/common",
            entry: "./src/common.js"
        },{
            name: "common/b",
            entry: "./src/aa.js"
        }
    ],
    // 页面的配置文件
    pages:[
        {
            PATH: "index",
            template: './index.ejs',
            entry: './index.js'
            data: {
            	aa: 12
        	},
            chunks: ["common/b"]
        }
    ]
});

Root

在普通路径中，可以使用[ROOT]来获取之前设置root的值，如果root没有设置值则会抛出异常

new WebpackMultiplePlugin({
    // 根路径
    root: "./src/"
    // 模板的文件输出名称,
    outputTemplateName: '[PATH].html',
    // chunk位置
    outputChunkName: "pages/[PATH]/[PATH]",
    // 公共默认模块的名称
    defaultCommonName: 'common/common',
    commons: [
        {
            // 与上面的是对应的
            name: "common/common",
            entry: "./src/common.js"
        },{
            name: "common/b",
            entry: "./src/aa.js"
        }
    ],
    // 页面的配置文件
    pages:[
        {
            path: "index",
            template: '[ROOT]/index.ejs',
            entry: '[ROOT]/index.js'
            data: {
            	aa: 12
        	},
            chunks: ["common/b"]
        }
    ]
});

default entry

默认情况下如果js入口名称为index.js并且与template 同级，那么js可以忽略不写

new WebpackMultiplePlugin({
    // 根路径
    root: "./src/"
    // 模板的文件输出名称,
    outputTemplateName: '[PATH].html',
    // chunk位置
    outputChunkName: "pages/[PATH]/[PATH]",
    // 公共默认模块的名称
    defaultCommonName: 'common/common',
    commons: [
        {
            // 与上面的是对应的
            name: "common/common",
            entry: "./src/common.js"
        },{
            name: "common/b",
            entry: "./src/aa.js"
        }
    ],
    // 页面的配置文件
    pages:[
        {
            path: "index",
            template: '[ROOT]/index.ejs',
            data: {
            	aa: 12
        	},
            chunks: ["common/b"]
        }
    ]
});

动态参数变量

为了更快捷开发，在页面window对象注入了某些变量来支持后续的开发

PAGE_PATH

这个代表当前页面page的path属性，可以在js中获取，这个js 是在 页面js的window对象注入的

common/main.js

alert("这是："+PAGE_PATH+"页面");

这样页面会自动采集window对象的路径

PAGE_DATA

这个是page定义data属性，可以通过这个属性获取

Custom Path

可以自定义路径让其输出

new WebpackMultiplePlugin({
  outputTemplatePath: "默认/html/[PATH].html", // 全局的路径输出模板位置
  outputChunkPath: "默认/js/[PATH].js", // 全局的js输出位置
  chunkName: "pages/[PATH]", // 全局的chunk位置
  pages: [
    {
      path: "/find",
      template: "./src/pages/find/index.ejs", 
      outputTemplatePath:"查找页面.html", // 局部模板位置
      outputChunkPath:"查找页面.js" // 局部模板位置
    },
    {
      path: "/login",
      template: "./src/pages/login/index.ejs", 
      outputTemplatePath: ()=> "登录页面.html", // 可以使用函数
      outputChunkPath: ()=> "登录页面.js" // 可以使用函数
    },
      // 下面是默认模板
    {
      path: "/register",
      template: "./src/pages/register/index.ejs",
    },
      // 可以使用占位符
    {
      path: "/aa",
      template: "./src/pages/aa/index.ejs",
      outputTemplatePath:()=> "[PATH].html",
      outputChunkPath:() => "[PATH].js"
    },
  ],
});