webpack2终极优化

webpack原生不支撑这个功能于是我做了一个插件 web-webpack-plugin

具体应用点开链接看具体文档，应用大年夜概如下：

demo(https://github.com/gwuhaolin/web-webpack-plugin/tree/master/demo/out-html)

webpack设备

module.exports = { 
 
    entry: { 
 
        A: './a', 
 
        B: './b', 
 
    }, 
 
    plugins: [ 
 
        new WebPlugin({ 
 
            // 输出的html文件名称，必填，留意不要有名，有名会覆盖互相文件。 
 
            filename: 'index.html', 
 
            // 该html文件依附的entry，必须是一个数组。依附的资本的注入次序按照数组的次序。 
 
            requires: ['A', 'B'], 
 
        }), 
 
    ] 
 
};

将会输出一个index.html文件，这个文件将会主动惹人 entry A 和 B 生成的js文件，

输出的html:

拿redux库来说，npm下载到的目次构造如下：

<html> 
 
<head> 
 
    <meta charset="UTF-8"> 
 
</head> 
 
</body> 
 
<script src=http://developer.51cto.com/art/201707/"A.js"></script> 
 
<script src=http://developer.51cto.com/art/201707/"B.js"></script> 
 
</body> 
 
</html>

应用 CommonsChunkPlugin 采取公共代码

输出的目次构造

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

治理多页面

固然webpack实用于单页应用，但复杂的体系经常是由多个单页应用构成，每个页面一个功能模块。webpack给出了js打包筹划但缺乏治理多个页面的功能。 web-webpack-plugin的AutoWebPlugin会主动的为你的体系琅绫强个单页应用生成一个html人口页，这小我口会主动的注入当前单页应用依附的资本，应用它你只需如下几行代码：

plugins: [ 
 
    // ./src/pages/ 代表存放所有页面的根目次，这个目次下的每一个目次被看着是一个单页应用 
 
    // 会为琅绫擎的每一个目次生成一个html人口 
 
    new AutoWebPlugin('./src/pages/', { 
 	
			 5/6   首页 上一页 3 4 5 6 下一页 尾页	
			

　　推荐阅读
　　CSS进阶：试试酷炫的3D视角
写这篇文┞仿的启事是因为看到了这个页面：https://shakeduang.nuomi.com/campus/index.html?from=timeline&isappinstalled=1(移动端页面，应用模仿器不雅看)控制 control 层，进入到圆柱画面内应用 CSS3 完成的 3D >>>详细阅读


本文标题：webpack2终极优化
地址：http://www.17bianji.com/lsqh/36159.html
 1/2    1