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"
    },
  ],
});