webpack-multiple-plugin v1.0.8

Webpack Multiple plugin

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

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

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

Options Plugin

插件主要配置

Pages Options

页面的配置信息

Common Options

公共模块的信息定义

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