Webpack-multiple-plugin NPM

Webpack Multiple plugin

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

Options Plugin

插件主要配置

Name	Type	Default	Description
`root`	`{String}`	`null`	设置根变量
`outputTemplateName`	`{String}`	`[path].html`	输出所有模板的文件名称
`outputChunkName`	`{String}`	`pages/[path]/[path]`	输出的所有chunk的名称
`pages`	`{Array}`	`[]`	页面的数据信息
`commons`	`{Array}`	`[]`	公共模块的chuank，当然也可以自己定义
`defaultCommonName`	`{String}`	`null`	默认公共模块的chunk名称
`templateJoinEntry`	`{Boolean}`	`false`	是否将模板加入入口

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位置
`outputChunkName`	`{String,Function(context,path)}`		单独的文件chunk名称
`outputTemplateName`	`{String,Function(context,path)}`		单独的模板名称

Common Options

公共模块的信息定义

Name	Type	Default	Description
`name`	`{String}`		公共的chunk名称
`entry`	`{String,Function(context,path)}`		入口文件的路径

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

webpack webpack-multiple webpack-pages webpack-plugins webpack-page webpack-pages-plugin

ejs html-webpack-plugin

@everything-registry/sub-chunk-3132 @infinitebrahmanuniverse/nolb-webpack-m

4 years ago

4 years ago

4 years ago

4 years ago