帮酷LOGO
  • 显示原文与译文双语对照的内容
add miss function to webpack

  • 源代码名称:web-webpack-plugin
  • 源代码网址:http://www.github.com/gwuhaolin/web-webpack-plugin
  • web-webpack-plugin源代码文档
  • web-webpack-plugin源代码下载
  • Git URL:
    git://www.github.com/gwuhaolin/web-webpack-plugin.git
  • Git Clone代码到本地:
    git clone http://www.github.com/gwuhaolin/web-webpack-plugin
  • Subversion代码到本地:
    $ svn co --depth empty http://www.github.com/gwuhaolin/web-webpack-plugin
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
  • Npm PackageBuild StatusNpm DownloadsDependency Status

    web-webpack-plugin

    中文文档

    在线阅读全书

    html-webpack-plugin的一个不错的替代方法,可以使 web pack使用HTML作为条目并处理多页面。

    安装
    npm i web-webpack-plugin --save-dev
    const { WebPlugin, AutoWebPlugin } =require('web-webpack-plugin');
    特性

    输出html文件演示程序

    web web pack配置

    module.exports= {
     entry: {
     A:'./a',
     B:'./b',
     },
     plugins: [
     newWebPlugin({
     // file name or full path for output file, required.// pay attention not to duplication of name,as is will cover other file filename:'index.html',
     // this html's requires entry,must be an array.dependent resource will inject into html use the order entry in array. requires: ['A', 'B'],
     }),
     ]
    };

    将输出名为 index.html的文件,这里文件将自动加载 web pack窗体 AB 生成的文件,即输出html为 below:

    输出 html

    <!DOCTYPE html>
    <html>
    <head>
     <metacharset="UTF-8">
    </head>
    <body>
    <scriptsrc="A.js"></script>
    <scriptsrc="B.js"></script>
    </body>
    </html>

    输出目录

    ├── A.js
    ├── B.js
    └── index.html

    使用html模板演示程序。

    web web pack配置

    module.exports= {
     entry: {
     A:'./a',
     B:'./b',
     },
     plugins: [
     newWebPlugin({
     filename:'index.html',
     // html template file path(full path relative to webpack.config.js) template:'./template.html',
     requires: ['A', 'B'],
     }),
     ]
    };

    html模板

    <!DOCTYPE html>
    <htmllang="zh-cn">
    <head>
     <metacharset="UTF-8">
     <!--load a chunk file config and output in webpack--> <scriptsrc="B"></script>
     <!--load a local reset style file direct without local var webpack--> <linkrel="stylesheet"href="./reset.min.css?_inline">
     <!--load a local google analyze file direct without local var webpack--> <scriptsrc="./google-analyze.js"></script>
    </head>
    <body><!--SCRIPT--><footer>web-webpack-plugin</footer>
    </body>
    </html>
    • 用户 <script src="B"></script> html模板中加载必需的条目,src="B" 中的B 表示 webpack.config.js 中的条目 NAME 配置
    • 注释 <--SCRIPT--> 表示注入位置,除 <script src></script> 所需的资源加载外,在 WebPlugin's requires option 中还需要资源配置。! 如果html模板中没有 <--SCRIPT-->,则需要脚本将插入 body 标记的广告结束。!

    输出 html

    <!DOCTYPE html>
    <htmllang="zh-cn">
    <head>
     <metacharset="UTF-8">
     <!--load a chunk file config and output in webpack--> <scriptsrc="B.js"></script>
     <!--load a local reset style file direct without local var webpack--> <style>body {background-color: rebeccapurple; }</style>
     <!--load a local google analyze file direct without local var webpack--> <scriptsrc="google-analyze.js"></script>
    </head>
    <body>
    <scriptsrc="A.js"></script>
    <footer>web-webpack-plugin</footer>
    </body>
    </html>

    配置资源属性演示程序

    html所需的每个资源,它可以将某些属性配置为 below:

    • _dist 仅在生产环境中加载
    • _dev 仅在开发环境中加载
    • _inline inline 资源内容信息 html,内联脚本和 css
    • _ie 资源只需要 IE 浏览器,通过 [if IE]>resource<[endif] 注释来实现!

    有两种配置资源属性的方法:

    html模板中的配置

    web web pack配置

    module.exports= {
     entry: {
     'ie-polyfill':'./ie-polyfill',
     inline:'./inline',
     dev:'./dev',
     googleAnalytics:'./google-analytics',
     },
     plugins: [
     newWebPlugin({
     filename:'index.html',
     template:'./template.html' }),
     ]
    };

    html模板

    <!DOCTYPE html>
    <htmllang="zh-cn">
    <head>
     <metacharset="UTF-8">
     <scriptsrc="inline?_inline"></script>
     <scriptsrc="ie-polyfill?_ie"></script>
    </head>
    <body>
    <scriptsrc="dev?_dev"></script><!--load a local google analyze file direct without local var webpack--><scriptasyncsrc="./google-analytics.js?_dist"></script>
    </body>
    </html>

    输出html文件

    webpack.config.js 中的配置

    web web pack配置

    module.exports= {
     plugins: [
     newWebPlugin({
     filename:'index.html',
     requires: {
     'ie-polyfill': {
     _ie:true },
     'inline': {
     _inline:true,
     _dist:true },
     'dev': {
     _dev:true },
     //load a local google analyze file direct without local var webpack'./google-analytics.js': {
     _dist:true }
     }
     }),
     ]
    };

    输出html文件

    为HTML标记演示注入 attr

    config文件中的HTML标记中没有 NAME 开头的配置的其他属性将作为HTML标记的属性。 如果具有查询 ?crossorigin=anonymous的脚本资源将导致输出 HTML,则为 比如 <script src="B.js" crossorigin="anonymous"></script>

    自动检测html条目

    AutoWebPlugin 插件可以以在目录中找到所有页面项,然后为每个页面自动配置一个 WebPlugin,可以以用作 below:

    web web pack配置

    constautoPlugin=newAutoWebPlugin(
     // the directory hold all pages'./src/pages', 
     {
     // all props below is not required // {string,function}// the template file path used by all pages// if typeof template ===string: template config is html template file full path// if typeof template ===function: template config is function(pageName)=>newFullPath, ask user for detail template:'./src/template.html',
     // { function(pageName,templateFullPath)=>htmlString }// if provide AutoWebPlugin will use Compiler to compile org template file to html content before used it in WebPlugintemplateCompiler: (pageName,templateFullPath)=>'',
     // {string,function}// get WebPlugin template's string content, high priority than template// typeof===string: template config is html template file string content// typeof===function: template config is function,ask user for detail templateContent:`<!DOCTYPE html>....`, 
     // {string,function}// javascript main file for current page,if it is null will use index.js in current page directory as main file// typeof entry===string: entry config is entry file full path// typeof entry===function: entry config is function(pageName)=>newFullPath, ask user for detail entry:null,
     // {function}// get WebPlugin output filename,default filename is pageName// set filename as function(pageName)=>filename to add custom logic  filename:null,
     // CommonsChunkPlugin options for all pages entry find by AutoWebPlugin.// if this is null will not do commonsChunk action commonsChunk: {
     name:'common',// name prop is require,output filename minChunks:2,// come from CommonsChunkPlugin },
     // {Array} pre append to all page's entry preEntrys:['./path/to/file1.js'],
     // {Array} post append to all page's entry postEntrys:['./path/to/file2.js'],
     // {string} publicPath for css file,for js file will use webpack.publicPath stylePublicPath:null,
     // page name list will not ignore by AutoWebPlugin(Not output html file for this page name) ignorePages:['pageName'],
     // whether output a pagemap.json file which contain all pages has been resolved with AutoWebPlugin in this way:// {"page name":"page url",} outputPagemap:true,
     }
    );module.exports= {
     // AutoWebPlugin will generate a entry for every page find in the directory hold all pages// autoPlugin.entry({}) used to pass entrys find by AutoWebPlugin to webpack config entry:autoPlugin.entry({
     youAdditionalEntryName:'you additional entry path',
     }),
    };

    目录

    ── src
    │ ├── home
    │ │ └── index.js
    │ ├── ie_polyfill.js
    │ ├── login
    │ │ └── index.js
    │ ├── polyfill.js
    │ ├── signup
    │ │ └── index.js
    │ └── template.html

    输出目录

    ├── dist
    │ ├── common.js
    │ ├── home.html
    │ ├── home.js
    │ ├── ie_polyfill.js
    │ ├── login.html
    │ ├── login.js
    │ ├── polyfill.js
    │ ├── signup.html
    │ └── signup.js

    AutoWebPlugin./src/ 中查找所有页面 home login signup 目录,这三个页面 home login signup:

    • index.js 用作主文件添加三个块 home login signup
    • 输出三个html文件 home.html login.html signup.html
    • 自动插入页面所需的资源。 e.g(inject home chunk home.html )

    AutoWebPlugin在 dir ./src/ 中查找所有页面 home login signup,然后:

    • 将 index.js 用作每个页面的条目以创建一个名为 chunk home login signup
    • 输出每个页面 home.html login.html signup.html的html文件

    ignorePages属性

    ignorePages 页 NAME 列表不会被 AutoWebPlugin ( 不输出这里页面名称的html文件) 忽略,类型是字符串的array 。

    模板属性

    若模板是字符串,则将它的视为html路径 relative html路径将模板作为当前页面模板文件使用当前页面目录 index.html 文件,如下面的页面模板文件

    web web pack配置

    newAutoWebPlugin('./src/', {
     // Template files used by all pagestemplate: (pageName) => {
     returnpath.resolve('./src',pageName,'index.html');
     },
     }
    );

    项属性

    entry属性与模板类似,并且还支持复杂情况下的回调函数。 但是如果条目是空的,那么使用当前页面目录 index.jsx? 作为入口

    配置 publicPath 演示程序

    加载 css 演示插件

    每个条目的资源可能包含css代码。 要提取css代码而不是偷偷加载到js中,需要加载 extract-text-webpack-plugin,那么我将自动处理与 above css相同

    web web pack配置

    // webpack.config.jsmodule.exports= {
     module: {
     loaders: [
     {
     test:/.css$/,
     loader:ExtractTextPlugin.extract({
     fallbackLoader:'style-loader',
     loader:'css-loader' })
     }
     ]
     },
     entry: {
     1:'./1',
     2:'./2',
     3:'./3',
     4:'./4',
     },
     plugins: [
     newExtractTextPlugin('[name].css'),
     newWebPlugin({
     filename:'index.html',
     template:'./template.html',
     requires: ['1', '2', '3', '4']
     }),
     ]
    };

    html模板

    <!DOCTYPE html>
    <htmllang="zh-cn">
    <head>
     <metacharset="UTF-8">
     <linkrel="stylesheet"href="1">
     <linkrel="stylesheet"href="2?_inline">
     <linkrel="stylesheet"href="3?_ie">
     <scriptsrc="1"></script>
     <!--STYLE--></head>
    <body>
    <scriptsrc="2"></script><!--SCRIPT--><footer>footer</footer>
    </body>
    </html>

    输出 html

    <!DOCTYPE html>
    <htmllang="zh-cn">
    <head>
     <metacharset="UTF-8">
     <linkrel="stylesheet"href="1.css">
     <style>/**2.css**/body {background-color: rebeccapurple; }</style>
     <!--[if IE]> <link rel="stylesheet" href="3.css"> <![endif]--> <scriptsrc="1.js"></script>
     <linkrel="stylesheet"href="4.css">
    </head>
    <body>
    <scriptsrc="2.js"></script>
    <scriptsrc="3.js"></script>
    <scriptsrc="4.js"></script>
    <footer>footer</footer>
    </body>
    </html>

    输出目录

    ├── 1.css
    ├── 1.js
    ├── 2.css
    ├── 2.js
    ├── 3.css
    ├── 3.js
    ├── 4.css
    ├── 4.js
    └── index.html

    缩小输出 html 演示程序

    WebPluginAutoWebPlugin 支持 htmlMinify 选项缩小输出html使用以下规则:

    • 如果设置了 htmlMinify
      • 如果 htmlMinifytrue,内置的HTML缩小函数将用于缩小输出 HTML ( 缩小 HTML only,not CSS或者 JS )
      • 如果 htmlMinifyfalse,内置的html函数将用于输出人类阅读友好的html
      • 如果 htmlMinifyfunction,则使用这里函数 function(orgHTMLString)=>minifyHTMLString 缩小 html
    • 如果缺少 htmlMinify ( undefined )
      • 如果环境为 production,内置HTML缩小功能将用于缩小输出 HTML ( 缩小 HTML only,not CSS或者 JS )
      • 如果环境不是 production,内置的html函数将用于输出人类阅读友好的html
    区分环境

    这个插件同时考虑了开发环境和的生产环境。 而且只有当 process.env.NODE_ENV = production 当前环境为环境,环境时,其他环境才会考虑开发环境。

    实践



    Copyright © 2011 HelpLib All rights reserved.    知识分享协议 京ICP备05059198号-3  |  如果智培  |  酷兔英语