菜单

【金沙国际】webpack详解

2019年3月12日 - 金沙前端

致我们终将组件化的Web

2015/11/25 · HTML5 · 1
评论 ·
组件化

最初的作品出处:
AlloyTeam   

那篇作品将从两年前的一次技术争议起来。争持的聚焦就是下图的四个目录分层结构。小编说按模块划分好,他说您傻逼啊,当然是按能源划分。

金沙国际 1 《=》金沙国际 2

”按模块划分“目录结构,把方今模块下的拥有逻辑和财富都放一块了,那对于多少人独自开发和保卫安全个人模块不是很好吗?当然了,这争执的结果是本身婴孩地改回主流的”按能源划分“的目录结构。因为,没有实现JS模块化和财富模块化,仅仅物理地方上的模块划分是不曾意义的,只会追加创设的资金财产而已。

固然如此她说得好有道理作者无言以对,可是我心不甘,等待他近年来端组件化成熟了,再来首次大战!

而明日就是自笔者一再正义的小日子!只是那时候不行跟你撕逼的人不在。

模块化的阙如

模块一般指能够独立拆分且通用的代码单元。由于JavaScript语言自身没有放置的模块机制(ES6有了!!),大家一般会利用CMD或ADM建立起模块机制。今后大多数略带大型一点的品种,都会动用requirejs大概seajs来落到实处JS的模块化。三个人分工协作开发,其各自定义重视和暴光接口,维护作用模块间独立性,对于项指标开发功用和品种前期扩充和保险,都是是有极大的救助意义。

但,麻烦我们有个别略读一下底下的代码

JavaScript

require([
‘Tmpl!../tmpl/list.html’,’lib/qqapi’,’module/position’,’module/refresh’,’module/page’,’module/net’
], function(listTmpl, QQapi, Position, Refresh, Page, NET){ var foo =
”, bar = []; QQapi.report(); Position.getLocaiton(function(data){
//… }); var init = function(){ bind();
NET.get(‘/cgi-bin/xxx/xxx’,function(data){ renderA(data.banner);
renderB(data.list); }); }; var processData = function(){ }; var bind =
function(){ }; var renderA = function(){ }; var renderB =
function(data){ listTmpl.render(‘#listContent’,processData(data)); };
var refresh = function(){ Page.refresh(); }; // app start init(); });

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
require([
    ‘Tmpl!../tmpl/list.html’,’lib/qqapi’,’module/position’,’module/refresh’,’module/page’,’module/net’
], function(listTmpl, QQapi, Position, Refresh, Page, NET){
    var foo = ”,
        bar = [];
    QQapi.report();
    Position.getLocaiton(function(data){
        //…
    });
    var init = function(){
        bind();
        NET.get(‘/cgi-bin/xxx/xxx’,function(data){
            renderA(data.banner);
            renderB(data.list);
        });
    };
    var processData = function(){
    };
    var bind = function(){
    };
    var renderA = function(){
    };
    var renderB = function(data){
        listTmpl.render(‘#listContent’,processData(data));
    };
    var refresh = function(){
        Page.refresh();
    };
    // app start
    init();
});

上边是现实性某些页面包车型地铁主js,已经封装了像Position,NET,Refresh等功效模块,但页面包车型大巴主逻辑依然是”面向过程“的代码结构。所谓面向进程,是指依据页面包车型客车渲染进度来编排代码结构。像:init
-> getData -> processData -> bindevent -> report -> xxx

方法之间线性跳转,你大致也能感受那样代码弊端。随着页面逻辑更是复杂,这条”进程线“也会越发长,并且特别绕。加之紧缺专业约束,别的项目成员依据各自须求,在”进程线“加插各自逻辑,最后这么些页面包车型客车逻辑变得难以保险。

金沙国际 3

开发需求触目惊心,生怕影响“进度线”后边寻常逻辑。并且每一回加插或涂改都以bug泛滥,无不令产品有关职员一律郁郁寡欢。

 页面结构模块化

依照下边包车型客车面向进程的标题,行行业内部也有不少缓解方案,而大家协会也总结出一套成熟的化解方案:Abstractjs,页面结构模块化。我们可以把大家的页面想象为三个乐高机器人,须求分裂零件组装,如下图,假如页面划分为tabContainer,listContainer和imgsContainer多个模块。最后把那么些模块add到终极的pageModel里面,最终利用rock方法让页面运营起来。

金沙国际 4
(原经过线示例图)

金沙国际 5
(页面结构化示例图)

上面是伪代码的落到实处

JavaScript

require([
‘Tmpl!../tmpl/list.html’,’Tmpl!../tmpl/imgs.html’,’lib/qqapi’,’module/refresh’,’module/page’
], function(listTmpl, imgsTmpl, QQapi, Refresh, Page ){ var
tabContainer = new RenderModel({ renderContainer: ‘#tabWrap’, data: {},
renderTmpl: “<li soda-repeat=’item in
data.tabs’>{{item}}</li>”, event: function(){ // tab’s event }
}); var listContainer = new ScrollModel({ scrollEl: $.os.ios ?
$(‘#Page’) : window, renderContainer: ‘#listWrap’, renderTmpl:
listTmpl, cgiName: ‘/cgi-bin/index-list?num=1’, processData:
function(data) { //… }, event: function(){ // listElement’s event },
error: function(data) { Page.show(‘数据再次来到十分[‘ + data.retcode +
‘]’); } }); var imgsContainer = new renderModel({ renderContainer:
‘#imgsWrap’, renderTmpl: listTmpl, cgiName: ‘/cgi-bin/getPics’,
processData: function(data) { //… }, event: function(){ //
imgsElement’s event }, complete: function(data) { QQapi.report(); } });
var page = new PageModel();
page.add([tabContainer,listContainer,imgsContainer]); page.rock(); });

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
require([
    ‘Tmpl!../tmpl/list.html’,’Tmpl!../tmpl/imgs.html’,’lib/qqapi’,’module/refresh’,’module/page’
], function(listTmpl, imgsTmpl, QQapi, Refresh, Page ){
 
    var tabContainer = new RenderModel({
        renderContainer: ‘#tabWrap’,
        data: {},
        renderTmpl: "<li soda-repeat=’item in data.tabs’>{{item}}</li>",
        event: function(){
            // tab’s event
        }
    });
 
    var listContainer = new ScrollModel({
        scrollEl: $.os.ios ? $(‘#Page’) : window,
        renderContainer: ‘#listWrap’,
        renderTmpl: listTmpl,
        cgiName: ‘/cgi-bin/index-list?num=1’,
        processData: function(data) {
            //…
        },
        event: function(){
            // listElement’s event
        },
        error: function(data) {
            Page.show(‘数据返回异常[‘ + data.retcode + ‘]’);
        }
    });
 
    var imgsContainer = new renderModel({
        renderContainer: ‘#imgsWrap’,
        renderTmpl: listTmpl,
        cgiName: ‘/cgi-bin/getPics’,
        processData: function(data) {
            //…
        },
        event: function(){
            // imgsElement’s event
        },
        complete: function(data) {
           QQapi.report();
        }
    });
 
    var page = new PageModel();
    page.add([tabContainer,listContainer,imgsContainer]);
    page.rock();
 
});

我们把这一个常用的乞求CGI,处理数据,事件绑定,上报,容错处理等一文山会海逻辑形式,以页面块为单位封装成2个Model模块。

那样的叁个虚无层Model,我们得以清晰地见到该页面块,请求的CGI是怎么样,绑定了什么风浪,做了怎么着上报,出错怎么处理。新增的代码就相应放置在对应的模块上相应的状态方法(preload,process,event,complete…),杜绝了往年的无规则乱增代码的写作。并且,根据分歧工作逻辑封装分化品类的Model,如列表滚动的ScrollModel,滑块成效的SliderModel等等,能够拓展中度封装,集中优化。

当今依据Model的页面结构开发,已经包涵一点”组件化“的含意。每一个Model都饱含各自的数据,模板,逻辑。已经算是1个全体的功用单元。但距离真正的WebComponent如故有一段距离,至少满意不断小编的”理想目录结构“。

 WebComponents 标准

咱俩想起一下施用1个datapicker的jquery的插件,所供给的步奏:

  1. 引入插件js

  2. 引入插件所需的css(倘使有)

  3. copy 组件的所需的html片段

  4. 添加代码触发组件运营

方今的“组件”基本上只可以落得是某些意义单元上的汇集。他的财富都以松散地分散在三种财富文件中,而且组件效率域揭示在大局意义域下,缺少内聚性很简单就会跟其它零件产生抵触,如最不难易行的css命名争持。对于那种“组件”,还不如上面包车型客车页面结构模块化。

于是乎W3C按耐不住了,制定四个WebComponents标准,为组件化的前途辅导了明路。

上边以较为不难的不二法门介绍那份正经,力求我们可以异常快掌握完毕组件化的始末。(对这一部分叩问的同学,能够跳过这一小节)

1. <template>模板能力

模板那东西南开学家最熟谙可是了,明年见的较多的模板品质大战artTemplate,juicer,tmpl,underscoretemplate等等。近来后又有mustachejs无逻辑模板引擎等新入选手。可是大家有没有想过,这么基础的能力,原生HTML5是不援救的(T_T)。

而前日WebComponent将要提供原生的沙盘能力

XHTML

<template id=”datapcikerTmpl”>
<div>小编是原生的模版</div> </template>

1
2
3
<template id="datapcikerTmpl">
<div>我是原生的模板</div>
</template>

template标签钦点义了myTmpl的模版,需求使用的时候就要innerHTML= document.querySelector('#myTmpl').content;能够看出那么些原生的沙盘够原始,模板占位符等效果都不曾,对于动态数据渲染模板能力只可以自力更新。

2. ShadowDom 封装组件独立的内部结构

ShadowDom能够领会为一份有单独成效域的html片段。那些html片段的CSS环境和主文书档案隔开分离的,各自作者保护持内部的独立性。也多亏ShadowDom的独门本性,使得组件化成为了说不定。

JavaScript

var wrap = document.querySelector(‘#wrap’); var shadow =
wrap.createShadowRoot(); shadow.innerHTML = ‘<p>you can not see me
</p>’

1
2
3
var wrap = document.querySelector(‘#wrap’);
var shadow = wrap.createShadowRoot();
shadow.innerHTML = ‘<p>you can not see me </p>’

在实际dom节点上选拔createShadowRoot方法即可生成其ShadowDom。就好像在整份Html的屋子里面,新建了3个shadow的房间。房间外的人都不清楚房间内有哪些,保持shadowDom的独立性。

3. 自定义原生标签

第叁接触Angularjs的directive指令功效,设定好组件的逻辑后,叁个<Datepicker
/>就能引入整个组件。如此狂炫酷炸碉堡天的作用,实在令人弹冠相庆,跃地三尺。

JavaScript

var tmpl = document.querySelector(‘#datapickerTmpl’); var
datapickerProto = Object.create(HTMLElement.prototype); //
设置把大家模板内容大家的shadowDom datapickerProto.createdCallback =
function() { var root = this.createShadowRoot();
root.appendChild(document.importNode(tmpl.content, true)); }; var
datapicker = docuemnt.registerElement(‘datapicker’,{ prototype:
datapickerProto });

1
2
3
4
5
6
7
8
9
10
11
12
var tmpl = document.querySelector(‘#datapickerTmpl’);
var datapickerProto = Object.create(HTMLElement.prototype);
 
// 设置把我们模板内容我们的shadowDom
datapickerProto.createdCallback = function() {
    var root = this.createShadowRoot();
    root.appendChild(document.importNode(tmpl.content, true));
};
 
var datapicker = docuemnt.registerElement(‘datapicker’,{
    prototype: datapickerProto
});

Object.create格局持续HTMLElement.prototype,获得二个新的prototype。当解析器发现大家在文书档案中标记它将检查是否1个名为createdCallback的法门。假若找到这几个措施它将立刻运转它,所以大家把克隆模板的情节来创立的ShadowDom。

末段,registerElement的方法传递大家的prototype来注册自定义标签。

地点的代码开头略显复杂了,把前边多个能力“模板”“shadowDom”结合,形成组件的里边逻辑。最终通过registerElement的不二法门注册组件。之后方可愉悦地<datapicker></datapicker>的施用。

4. imports解决组件间的注重

XHTML

<link rel=”import” href=”datapciker.html”>

1
<link rel="import" href="datapciker.html">

以此类php最常用的html导入成效,HTML原生也能支撑了。

WebComponents标准内容大约到这里,是的,作者那边没有何样德姆o,也从不实践经验分享。由于webComponents新特色,基本上巳了高版本的Chrome帮忙外,别的浏览器的援救度甚少。就算有polymer扶助拉动webcompoents的库存在,不过polymer自己的供给版本也是十分高(IE10+)。所以前日的骨干并不是他。

小编们大概来回看一下WebCompoents的四片段效能:

1 .<template>定义组件的HTML模板能力

  1. Shadow Dom封装组件的内部结构,并且维持其独立性

  2. Custom Element 对外提供组件的标签,完成自定义标签

  3. import消除组件结合和正视性加载

 组件化实践方案

法定的行业内部看完了,大家寻思一下。一份真正成熟可信的组件化方案,要求具备的力量。

“能源高内聚”—— 组件财富内部高内聚,组件财富由本身加载控制

“成效域独立”—— 内部结构密封,不与全局或任何零件发生震慑

“自定义标签”—— 定义组件的使用格局

“可相互结合”—— 组件正在有力的地方,组件间组装整合

“接口规范化”—— 组件接口有联合规范,大概是生命周期的管理

个体觉得,模板能力是基础能力,跟是还是不是组件化没有强联系,所以并未提议叁个大点。

既是是履行,现阶段WebComponent的协助度还不成熟,不能够同日而语方案的招数。而除此以外一套以高品质虚拟Dom为切入点的机件框架React,在facebook的造势下,社区取得了大力发展。此外一名骨干Webpack,负责化解组件财富内聚,同时跟React万分切合形成互补。

所以【Webpack】+【React】将会是那套方案的宗旨技术。

不明白您未来是“又是react+webpack”感到失望金沙国际 6,照旧“太好了是react+webpack”不用再学一回新框架的开心金沙国际 7。无论如何上面的始末不会让你失望的。

一,组件生命周期

金沙国际 8

React天生就是强制性组件化的,所以能够从根特性上化解面向进程代码所拉动的困苦。React组件自己有生命周期方法,能够满意“接口规范化”能力点。并且跟“页面结构模块化”的所封装抽离的多少个办法能挨个对应。其它react的jsx自带模板功用,把html页面片直接写在render方法内,组件内聚性尤其紧凑。

鉴于React编写的JSX是会先生成虚拟Dom的,必要时机才真正插入到Dom树。使用React必必要驾驭组件的生命周期,其生命周期八个意况:

Mount: 插入Dom

Update: 更新Dom

Unmount: 拔出Dom

mount那单词翻译增添,嵌入等。作者倒是建议“插入”更好理解。插入!拔出!插入!拔出!默念三回,懂了没?别少看黄段子的力量,

金沙国际 9

零件状态正是: 插入-> 更新 ->拔出。

接下来每一种组件状态会有三种处理函数,一前一后,will函数和did函数。

componentWillMount()  准备插入前

componentDidlMount()  插入后

componentWillUpdate() 准备更新前

componentDidUpdate()  更新后

componentWillUnmount() 准备拔出前

因为拔出后为主都以贤者形态(笔者说的是组件),所以并未DidUnmount这些方式。

其它React此外1个主干:数据模型props和state,对应着也有自个状态方法

getInitialState()     获取初阶化state。

getDefaultProps() 获取默许props。对于那一个从没父组件传递的props,通过该方法设置暗中同意的props

componentWillReceiveProps()  已插入的零部件收到新的props时调用

再有四个分歧常常情状的处理函数,用于优化处理

shouldComponentUpdate():判断组件是还是不是要求update调用

添加最重庆大学的render方法,React自己带的法子刚刚好12个。对于初学者的话是比较麻烦消化。但实质上getInitialStatecomponentDidMountrender多个意况方法都能做到超越47%组件,不必惧怕。

回来组件化的主旨。

三个页面结构模块化的零件,能独立包装整个组件的进程线

金沙国际 10

大家换算成React生命周期方法:

金沙国际 11

 

零件的景况方法流中,有两点必要至极表明:

1,一回渲染:

由于React的杜撰Dom个性,组件的render函数不需本身触发,根据props和state的更动自个通过差距算法,得出最优的渲染。

呼吁CGI一般皆以异步,所以肯定带来一回渲染。只是空数据渲染的时候,有只怕会被React优化掉。当数码回来,通过setState,触发叁遍render

 

2,componentWiillMount与componentDidMount的差别

和超越伍分叁React的课程小说不平等,ajax请求小编提出在威尔Mount的点子内实施,而不是组件开首化成功以后的DidMount。那样能在“空数据渲染”阶段在此之前请求数据,尽早地回落一次渲染的年华。

willMount只会履行三遍,卓殊适合做init的工作。

didMount也只会履行一遍,并且那时候真实的Dom已经形成,格外适合事件绑定和complete类的逻辑。

 

 二,JSX非常丑,可是组件内聚的显要!

WebComponents的正经之一,需求模板能力。本是觉得是大家耳熟能详的模版能力,但React中的JSX那样的怪人依然让人议论纷繁。React还一贯不火起来的时候,咱们就早已在博客园上尖锐地吐槽了“JSX写的代码这TM的丑”。那实质上只是德姆o阶段JSX,等到实战的大型项目中的JSX,包括多景况多数据多事件的时候,你会意识………….JSX写的代码照旧非常丑。

金沙国际 12
(即使用sublime-babel等插件高亮,逻辑和渲染耦合一起,阅读性依旧略差)

为什么我们会认为丑?因为大家曾经经对“视图-样式-逻辑”分离的做法潜移默化。

据悉维护性和可读性,甚至品质,我们都不建议直接在Dom上边绑定事件依旧直接写style属性。我们会在JS写事件代理,在CSS上写上classname,html上的就是清楚的Dom结构。大家很好地尊崇着MVC的设计格局,一切安好。直到JSX把她们都夹杂在一块儿,所守护的技巧栈受到凌犯,难免存有抗拒。

 

不过从组件化的目标来看,那种高内聚的做法未尝不可。

下边包车型大巴代码,在此之前的“逻辑视图分离”情势,大家供给去找相应的js文件,相应的event函数体内,找到td-info的class所绑定的风浪。

对照起JSX的惊人内聚,全部事件逻辑正是在自个儿jsx文件内,绑定的正是自己的showInfo方法。组件化的性状能及时浮现出来。

(注意:就算写法上大家好像是HTML的内联事件处理器,可是在React底层并不曾实际赋值类似onClick属性,内层依旧选拔类似事件代理的不二法门,高效地维护着事件处理器)

再来看一段style的jsx。其实jsx没有对体制有硬性规定,大家一齐可听从在此以前的定义class的逻辑。任何一段样式都应当用class来定义。在jsx你也全然能够如此做。不过由于组件的独立性,作者提议部分唯有“一回性”的体裁直接行使style赋值更好。收缩冗余的class。

XHTML

<div className=”list” style={{background: “#ddd”}}> {list_html}
</div>

1
2
3
<div className="list" style={{background: "#ddd"}}>
   {list_html}
</div>

可能JSX内部有担当繁琐的逻辑样式,可JSX的自定义标签能力,组件的黑盒性立马能感受出来,是或不是眨眼间间美好了累累。

JavaScript

render: function(){ return ( <div> <Menus
bannerNums={this.state.list.length}></Menus> <TableList
data={this.state.list}></TableList> </div> ); }

1
2
3
4
5
6
7
8
render: function(){
    return (
      <div>
         <Menus bannerNums={this.state.list.length}></Menus>
         <TableList data={this.state.list}></TableList>
      </div>
   );
}

就算如此JSX本质上是为了虚拟Dom而准备的,但那种逻辑和视图中度合一对于组件化未尝不是一件好事。

 

学习完React这么些组件化框架后,看看组件化能力点的成功情况

“财富高内聚”—— (33%)  html与js内聚

“成效域独立”—— (一半)  js的作用域独立

“自定义标签”—— (百分百)jsx

“可互相结合”—— (六分之三)  可整合,但贫乏可行的加载方式

“接口规范化”—— (百分百)组件生命周期方法

 

Webpack 财富组件化

对此组件化的能源独立性,一般的模块加载工具和构建流程视乎变得辛苦。组件化的营造筑工程程化,不再是前面大家广阔的,css合二,js合三,而是体验在组件间的重视于加载关系。webpack正好适合须要点,一方面填补组件化能力点,另一方帮忙大家健全组件化的总体构建环境。

首先要阐Bellamy(Bellamy)点是,webpack是三个模块加载打包工具,用于管理你的模块财富依赖打包难题。那跟大家熟识的requirejs模块加载工具,和grunt/gulp营造筑工程具的概念,多多少少某个出入又有个别雷同。

金沙国际 13

先是webpak对于CommonJS与速龙同时帮忙,满足我们模块/组件的加载情势。

JavaScript

require(“module”); require(“../file.js”); exports.doStuff = function()
{}; module.exports = someValue;

1
2
3
4
require("module");
require("../file.js");
exports.doStuff = function() {};
module.exports = someValue;

JavaScript

define(“mymodule”, [“dep1”, “dep2”], function(d1, d2) { return
someExportedValue; });

1
2
3
define("mymodule", ["dep1", "dep2"], function(d1, d2) {
    return someExportedValue;
});

当然最强大的,最优异的,当然是模块打包效率。那就是那百分之十效,补充了组件化财富注重,以及完整工程化的力量

据说webpack的规划意见,全数财富都以“模块”,webpack内部贯彻了一套财富加运载飞机制,能够把想css,图片等能源等有依靠关系的“模块”加载。那跟大家选用requirejs那种单纯处理js大大分歧。而这套加运载飞机制,通过两个个loader来达成。

 

JavaScript

// webpack.config.js module.exports = { entry: { entry: ‘./index.jsx’,
}, output: { path: __dirname, filename: ‘[name].min.js’ }, module:
{ loaders: [ {test: /\.css$/, loader: ‘style!css’ }, {test:
/\.(jsx|js)?$/, loader: ‘jsx?harmony’, exclude: /node_modules/},
{test: /\.(png|jpg|jpeg)$/, loader: ‘url-loader?limit=10240’} ] } };

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// webpack.config.js
module.exports = {
    entry: {
     entry: ‘./index.jsx’,
    },
    output: {
        path: __dirname,
        filename: ‘[name].min.js’
    },
    module: {
        loaders: [
            {test: /\.css$/, loader: ‘style!css’ },
            {test: /\.(jsx|js)?$/, loader: ‘jsx?harmony’, exclude: /node_modules/},
            {test: /\.(png|jpg|jpeg)$/, loader: ‘url-loader?limit=10240’}
        ]
    }
};

地点一份不难的webpack配置文件,留意loaders的配备,数组内3个object配置为一种模块财富的加运载飞机制。test的正则为协作文件规则,loader的为匹配到文件将由哪些加载器处理,四个电脑之间用相隔,处理顺序从右到左。

 

style!css,css文件通过css-loader(处理css),再到style-loader(inline到html)的加工处理流。

jsx文件通过jsx-loader编写翻译,‘?’开启加载参数,harmony帮忙ES6的语法。

图表财富通过url-loader加载器,配置参数limit,控制少于10KB的图纸将会base64化。

 能源文件怎么样被require?

JavaScript

// 加载组件自个儿css require(‘./slider.css’); // 加载组件注重的模块 var
Clip = require(‘./clipitem.js’); // 加载图片能源 var spinnerImg =
require(‘./loading.png’);

1
2
3
4
5
6
// 加载组件自身css
require(‘./slider.css’);
// 加载组件依赖的模块
var Clip = require(‘./clipitem.js’);
// 加载图片资源
var spinnerImg = require(‘./loading.png’);

在webpack的js文件中大家除了require大家健康的js文件,css和png等静态文件也能够被require进来。大家通过webpack命令,编写翻译之后,看看输出结果怎样:

JavaScript

webpackJsonp([0], { /* 0 */ /***/ function(module, exports,
__webpack_require__) { // 加载组件自己css
__webpack_require__(1); // 加载组件依赖的模块 var Clip =
__webpack_require__(5); // 加载图片财富 var spinnerImg =
__webpack_require__(6); /***/ }, /* 1 */ /***/
function(module, exports, __webpack_require__) { /***/ }, /* 2
*/ /***/ function(module, exports, __webpack_require__) {
exports = module.exports = __webpack_require__(3)();
exports.push([module.id, “.slider-wrap{\r\n position: relative;\r\n
width: 100%;\r\n margin: 50px;\r\n background:
#fff;\r\n}\r\n\r\n.slider-wrap li{\r\n text-align:
center;\r\n line-height: 20px;\r\n}”, “”]); /***/ }, /* 3 */
/***/ function(module, exports) { /***/ }, /* 4 */ /***/
function(module, exports, __webpack_require__) { /***/ }, /* 5
*/ /***/ function(module, exports) { console.log(‘hello, here is
clipitem.js’) ; /***/ }, /* 6 */ /***/ function(module, exports)
{ module.exports = “data:image/png;base64,iVBORw0KGg……” /***/ }
]);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
webpackJsonp([0], {
/* 0 */
/***/ function(module, exports, __webpack_require__) {
          // 加载组件自身css
          __webpack_require__(1);
          // 加载组件依赖的模块
          var Clip = __webpack_require__(5);
          // 加载图片资源
          var spinnerImg = __webpack_require__(6);
/***/ },
/* 1 */
/***/ function(module, exports, __webpack_require__) {
 
/***/ },
/* 2 */
/***/ function(module, exports, __webpack_require__) {
          exports = module.exports = __webpack_require__(3)();
          exports.push([module.id, ".slider-wrap{\r\n position: relative;\r\n width: 100%;\r\n margin: 50px;\r\n background: #fff;\r\n}\r\n\r\n.slider-wrap li{\r\n text-align: center;\r\n line-height: 20px;\r\n}", ""]);
 
/***/ },
/* 3 */
/***/ function(module, exports) {
 
/***/ },
 
/* 4 */
/***/ function(module, exports, __webpack_require__) {
/***/ },
 
/* 5 */
/***/ function(module, exports) {
          console.log(‘hello, here is clipitem.js’) ;
/***/ },
/* 6 */
/***/ function(module, exports) {
          module.exports = "data:image/png;base64,iVBORw0KGg……"
/***/ }
]);

webpack编写翻译之后,输出文件视乎乱糟糟的,但其实每二个财富都被封装在叁个函数体内,并且以编号的花样标记(注释)。这么些模块,由webpack的__webpack_require__里头方法加载。入口文件为编号0的函数index.js,能够看来__webpack_require__加载其余编号的模块。

css文件在号码1,由于采纳css-loader和style-loader,编号1-4都是拍卖css。个中编号2我们得以看大家的css的string体。最终会以内联的办法插入到html中。

图形文件在号码6,能够看出exports出base64化的图样。

 组件一体输出

JavaScript

// 加载组件自个儿css require(‘./slider.css’); // 加载组件正视的模块 var
React = require(‘react’); var Clip = require(‘../ui/clipitem.jsx’); //
加载图片财富 var spinnerImg = require(‘./loading.png’); var Slider =
React.createClass({ getInitialState: function() { // … },
componentDidMount: function(){ // … }, render: function() { return (
<div> <Clip data={this.props.imgs} /> <img
className=”loading” src={spinnerImg} /> </div> ); } });
module.exports = Slider;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
// 加载组件自身css
require(‘./slider.css’);
// 加载组件依赖的模块
var React = require(‘react’);
var Clip = require(‘../ui/clipitem.jsx’);
// 加载图片资源
var spinnerImg = require(‘./loading.png’);
var Slider = React.createClass({
    getInitialState: function() {
        // …
    },
    componentDidMount: function(){
        // …
    },
    render: function() {
        return (
            <div>
               <Clip data={this.props.imgs} />
               <img className="loading" src={spinnerImg} />
            </div>
        );
    }
});
module.exports = Slider;

假诺说,react使到html和js合为一体。

那么丰盛webpack,两者结合一起的话。js,css,png(base64),html
全体web财富都能合成多个JS文件。那正是那套方案的焦点所在:零件独立一体化。假诺要引用多个零部件,仅仅require('./slider.js') 即可实现。

 

进入webpack的模块加载器之后,大家组件的加载难点,内聚难题也都事业有成地消除掉

“能源高内聚”—— (百分之百) 全数能源能够一js出口

“可互相结合”—— (百分百)  可结合可依靠加载

 

 CSS模块化实践

很和颜悦色,你能阅读到此地。方今我们的零部件完毕度卓殊的高,财富内聚,易于组合,成效域独立互不污染。。。。等等金沙国际 14,视乎CSS模块的完毕度有欠缺。

那么近年来组件实现度来看,CSS功用域其实是全局性的,并非组件内部独立。下一步,大家要做得正是何许让我们组件内部的CSS功用域独立。

此时大概有人即刻跳出,大喊一句“德玛西亚!”,哦不,应该是“用sass啊傻逼!”。但是品类组件化之后,组件的里边封装已经很好了,其内部dom结构和css趋向不难,独立,甚至是破碎的。LESS和SASS的一体式样式框架的筹划,他的嵌套,变量,include,函数等丰硕的功用对于全体大型项目标体制管理十三分有效。但对此1个效应单一组件内部样式,视乎就变的略微争辨。“不能够为了框架而框架,合适才是最好的”。视乎原生的css能力已经满意组件的体裁须要,唯独就是地点的css功效域难点。

 

此处作者付诸思考的方案:
classname随便写,保持原生的措施。编写翻译阶段,依照组件在档次路线的唯一性,由【组件classname+组件唯一途径】打成md5,生成全局唯一性classname。正当自家要写二个loader完毕自笔者的想法的时候,发现歪果仁已经早在先走一步了。。。。

此间具体方案参考作者后面博客的译文:

事先咱们谈论过JS的模块。今后由此Webpack被加载的CSS资源叫做“CSS模块”?作者认为依旧有题指标。将来style-loader插件的兑现精神上只是创立link[rel=stylesheet]要素插入到document中。那种作为和普通引入JS模块非凡分裂。引入另四个JS模块是调用它所提供的接口,但引入八个CSS却并不“调用”CSS。所以引入CSS自己对于JS程序来说并不设有“模块化”意义,纯粹只是表明了一种能源依赖——即该零件所要完结的意义还索要或多或少asset。

据此,那位歪果仁还增添了“CSS模块化”的概念,除了上边的大家须求部分功效域外,还有很多效益,那里不详述。具体参考原来的文章 

可怜赞的一点,正是cssmodules已经被css-loader收纳。所以大家不须求借助额外的loader,基本的css-loader开启参数modules即可

JavaScript

//webpack.config.js … module: { loaders: [ {test: /\.css$/, loader:
‘style!css?modules&localIdentName=[local]__[name]_[hash:base64:5]’
}, ] } ….

1
2
3
4
5
6
7
8
//webpack.config.js
…  
    module: {
        loaders: [
            {test: /\.css$/, loader: ‘style!css?modules&localIdentName=[local]__[name]_[hash:base64:5]’ },
        ]  
    }
….

modules参数代表开启css-modules功用,loaclIdentName为设置大家编写翻译后的css名字,为了方便debug,大家把classname(local)和组件名字(name)输出。当然能够在终极输出的本子为了节省提交,仅仅使用hash值即可。其余在react中的用法大致如下。

JavaScript

var styles = require(‘./banner.css’); var Banner = new
React.createClass({ … render: function(){ return ( <div> <div
className={styles.classA}></div> </div> ) } });

1
2
3
4
5
6
7
8
9
10
11
var styles = require(‘./banner.css’);
var Banner = new React.createClass({
    …
    render: function(){
        return (
            <div>
                <div className={styles.classA}></div>
            </div>
        )
    }
});

说到底那里关于出于对CSS一些探讨,

有关css-modules的别的功效,小编并不打算利用。在里头分享【大家竭尽所能地让CSS变得复杂】中提及:

笔者们项目中山高校部的CSS都不会像boostrap那样要求变量来设置,身为一线开发者的大家大致能够感受到:设计师们改版UI,相对不是简不难单的换个色或改个间距,而是万物更新的全新UI,那绝对不是3个变量所能化解的”维护性“。

反而项目实战进度中,真正要消除的是:在本子迭代进程中那个淘汰掉的晚点CSS,多量地堆放在档次个中。大家像极了家中的欧巴酱不舍得丢掉没用的事物,因为那可是大家选拔sass或less编写出具有惊人的可维护性的,肯定有复用的一天。

那一个堆积的晚点CSS(or
sass)之间又有一对正视,一部分逾期失效了,一部分又被新的体制复用了,导致没人敢动那一个历史样式。结果现网项目迭代还带着大批量两年前没用的样式文件。

组件化之后,css的布署同样被改良了。大概postcss才是你未来手上最契合的工具,而不在是sass。

 

到那里,我们究竟把组件化最终1个难点也消除了。

“功能域独立”—— (百分之百) 就像是shadowDom功用域独立

 

到此地,大家能够开一瓶82年的7-Up,好好庆祝一下。不是吗?

金沙国际 15

 

 组件化之路还在继承

webpack和react还有好多新分外首要的特征和功效,介于本文仅仅围绕着组件化的为主导,没有各类解说。其它,配搭gulp/grunt补充webpack营造能力,webpack的codeSplitting,react的零部件通信难点,开发与生育环境布置等等,都以全部大型项目方案的所不可不的,限于篇幅难题。能够等等小编更新下篇,或我们能够自动查阅。

只是,不得不再安利一下react-hotloader神器。热加载的支付情势相对是下一代前端开发必备。严俊说,设若没有了热加载,小编会很坚决地扬弃那套方案,即便那套方案再怎么好好,笔者都讨厌react必要5~6s的编写翻译时间。但是hotloader能够在本人不刷新页面包车型的士状态下,动态修改代码,而且不单单是样式,连逻辑也是即时生效。

金沙国际 16

如上在form表单内。使用热加载,表单不必要再度填写,修改submit的逻辑马上见效。那样的支出效用真不是抓好仅仅3个品位。必须安利一下。

 

唯恐你意识,使用组件化方案今后,整个技术栈都被更新了一番。学习开销也不少,并且能够预言到,基于组件化的前端还会过多欠缺的问题,例如质量优化方案须要再度思考,甚至最宗旨的零部件可复用性不自然高。前面十分长一段时间,须求大家不住训练与优化,探求最优的前端组件化之道。

足足大家得以想象,不再担心本人写的代码跟某些什么人什么人争执,不再为找某段逻辑在七个公文和方法间不停,不再copy一片片逻辑然后改改。大家每趟编写都以可选取,可组成,独立且内聚的机件。而各类页面将会由二个个嵌套组合的零件,互相独立却相互效能。

 

对此这么的前端今后,有所指望,不是很好啊

时至前几天,多谢您的读书。

1 赞 6 收藏 1
评论

金沙国际 17

其他:
1、shimming :
在 英特尔/CMD
中,大家必要对不符合规范的模块(比如有个别一贯回到全局变量的插件)进行shim 处理,那时候我们需求动用 exports-loader 来扶持:
{ test: require.resolve(“./src/js/tool/swipe.js”), loader:
“exports?swipe”}
事后在本子中要求引用该模块的时候,这么简单地来选择就足以了:
require(‘./tool/swipe.js’);
swipe();
② 、自定义公共模块提取:
在小说发轫大家选拔了 CommonsChunkPlugin
插件来提取多个页面之间的国有模块,并将该模块打包为 common.js 。
但有时大家盼望能更进一步性情化一些,大家能够如此安顿:
var CommonsChunkPlugin =
require(“webpack/lib/optimize/CommonsChunkPlugin”);
module.exports = {
entry: {
p1: “./page1”,
p2: “./page2”,
p3: “./page3”,
ap1: “./admin/page1”,
ap2: “./admin/page2”
},
output: {
filename: “[name].js”
},
plugins: [
new CommonsChunkPlugin(“admin-commons.js”, [“ap1”, “ap2”]),
new CommonsChunkPlugin(“commons.js”, [“p1”, “p2”,
“admin-commons.js”])
]
};
// <script>s required:
// page1.html: commons.js, p1.js
// page2.html: commons.js, p2.js
// page3.html: p3.js
// admin-page1.html: commons.js, admin-commons.js, ap1.js
// admin-page2.html: commons.js, admin-commons.js, ap2.js
③ 、独立包装样式:
偶尔大概希望项目标体制能不要被打包到脚本中,而是独立出来作为.css,然后在页面中以标签引入。这时候大家须要extract-text-webpack-plugin 来提携:
var webpack = require(‘webpack’);
var commonsPlugin = new
webpack.optimize.CommonsChunkPlugin(‘common.js’);
var ExtractTextPlugin = require(“extract-text-webpack-plugin”);
module.exports = {
plugins: [commonsPlugin, new ExtractTextPlugin(“[name].css”)],
entry: {
//…省略别的配置
终极 webpack 执行后会乖乖地把体制文件提取出来:
④ 、使用CDN远程文件:
奇迹大家期待有些模块走CDN并以<script>的款式挂载到页面上来加载,但又愿意能在
webpack 的模块中使用上。
此时大家得以在配置文件里使用 externals 属性来帮衬:
{
externals: {
// require(“jquery”) 是引用自外部模块的
// 对应全局变量 jQuery
“jquery”: “jQuery”
}
}
要求小心的是,得保证 CDN 文件必须在 webpack 打包文件引入之前先引入。
作者们倒也足以动用 script.js 在本子中来加载大家的模块:
var $script = require(“scriptjs”);
$script(“//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js”,
function() {
$(‘body’).html(‘It works!’)
});
5、与grunt/gulp相结合:
gulp.task(“webpack”, function(callback) {
// run webpack
webpack({
// configuration
}, function(err, stats) {
if(err) throw new gutil.PluginError(“webpack”, err);
gutil.log(“[webpack]”, stats.toString({
// output options
}));
callback();
});
});
本来我们只供给把陈设写到 webpack({ … }) 中去即可,无须再写
webpack.config.js 了。

webpack.config.js 以下是基本配置
单个入口文件
var path = require(‘path’);

Loaders: Webpack 本人只会处理
Javascript,为了促成将其余能源也定义为模块,并转账为 Javascript,
Webpack 定义 loaders , 不一致的 loader 能够将相应的财富转化为 Javascript
模块。

壹 、什么是webpack:webpack是一款模块加载兼打包工具,它能够将js、jsx、coffee、样式sass、less,图片等作为模块来行使和拍卖。
贰 、优势:壹 、以commonJS的样式来书写脚本,对速龙、CMD的支撑也很完善,方便旧项目的搬迁。二 、能被模块化的穿梭是JS了。三 、能取代部分grunt/gulp的干活,例如打包,压缩混淆,图片转base64等。叁 、扩展性强,插件机制健全,扶助React热拔插(react-hot-loader)
三 、安装和布署:
① 、安装:直接利用npm来进展安装
$ npm install webpack -g
将依靠写入package.json包
$ npm init
$ npm install webpack –save-dev
2、配置:
各类种类必须配备二个webpack.config.js,功能仿佛gulpfile.js/Gruntfile.js,贰个布局项,告诉webpack要做哪些。
示例:
var webpack = require(‘webpack’);
var commonsPlugin = new
webpack.optimize.CommonsChunkPlugin(‘common.js’);
module.exports = {
//插件项
plugins: [commonsPlugin],
//页面入口文件配置
entry: {
index : ‘./src/js/page/index.js’
},
//入口文件输出配置
output: {
path: ‘dist/js/page’,
filename: ‘[name].js’
},
module: {
//加载器配置
loaders: [
{ test: /.css$/, loader: ‘style-loader!css-loader’ },
{ test: /.js$/, loader: ‘jsx-loader?harmony’ },
{ test: /.scss$/, loader: ‘style!css!sass?sourceMap’},
{ test: /.(png|jpg)$/, loader: ‘url-loader?limit=8192’}
]
},
//此外化解方案安顿
resolve: {
root: ‘E:/github/flux-example/src’, //相对路线
extensions: [”, ‘.js’, ‘.json’, ‘.scss’],
alias: {
AppStore : ‘js/stores/AppStores.js’,
ActionType : ‘js/actions/ActionType.js’,
AppAction : ‘js/actions/AppAction.js’
}
}
};
(1)plugins是插件项,那里运用了一个CommonsChunkPlugin的插件,它用来提取多个输入文件的国有脚本有的,然后生成三个common.js来便于多页面之间的复用。
(2)entry是页面包车型地铁输入文件配置,output是相应的输出项配置
{
entry: {
page1: “./page1”,
//扶助数组格局,将加载数组中的全体模块,但以最后二个模块作为出口
page2: [“./entry1”, “./entry2”]
},
output: {
path: “dist/js/page”,
filename: “[name].bundle.js”
}
}
该代码会转移3个page1.bundle.js和page2.bundle.js,并存放在./dist/js/page文件夹下。
(3)module.loaders,告知webpack每个文件都须要哪些加载器来拍卖
module: {
//加载器配置
loaders: [
//.css 文件使用 style-loader 和 css-loader 来拍卖
{ test: /.css$/, loader: ‘style-loader!css-loader’ },
//.js 文件使用 jsx-loader 来编写翻译处理
{ test: /.js$/, loader: ‘jsx-loader?harmony’ },
//.scss 文件使用 style-loader、css-loader 和 sass-loader 来编写翻译处理
{ test: /.scss$/, loader: ‘style!css!sass?sourceMap’},
//图片文件使用 url-loader 来处理,小于8kb的直接转为base64
{ test: /.(png|jpg)$/, loader: ‘url-loader?limit=8192’}
]
}
-loader能够不写,七个loader之间用“!”连接起来。全部的加载器都亟需经过npm来加载。
诸如最终一个url-loader,它会将样式中引用到的图形转为模块来处理。使用前开展设置:
$ npm install url-loader -save-dev
布署新闻的参数:“?limit=8192”表示将有着小于8kb的图片都转为base64方式(超过8kb的才使用url-loader来映射到文件,否则转为data
url格局)
(4)resolve配置,
resolve: {
//查找module的话从此间起先查找
root: ‘E:/github/flux-example/src’, //相对路线
//自动扩充文件后缀名,意味着大家require模块能够简简单单不写后缀名
extensions: [”, ‘.js’, ‘.json’, ‘.scss’],
//模块小名定义,方便后续直接引用别称,无须多写长长的地址
alias: {
AppStore : ‘js/stores/AppStores.js’,//后续直接 require(‘AppStore’)
即可
ActionType : ‘js/actions/ActionType.js’,
AppAction : ‘js/actions/AppAction.js’
}
}
四 、运营webpack,直接实施:
$ webpack –display-error-details
末尾的参数
“-display-error-details”推荐加上,方便出错开上下班时间能精通到更详实的消息。别的首要参数:
$ webpack –config XXX.js
//使用另一份配置文件(比如webpack.config2.js)来打包
$ webpack –watch //监听变动并自行打包
$ webpack -p //压缩混淆脚本,那几个特别足够重庆大学!
$ webpack -d //生成map映射文件,告知哪些模块被最后包装到什么地方了
-p是很重点的参数,曾经一个未压缩的 700kb 的文本,压缩后直接降到
180kb(首若是体制那块一句就占据一行脚本,导致未压缩脚本变得十分的大)。
⑤ 、模块引入:
1、在HTML页面引入:引入webpack最终生成的本子即可:
<!DOCTYPE html>
<html>
<head lang=”en”>
<meta charset=”UTF-8″>
<title>demo</title>
</head>
<body>
<script src=”dist/js/page/common.js”></script>
<script src=”dist/js/page/index.js”></script>
</body>
</html>
能够看来我们连样式都休想引入,毕竟脚本执行时会动态生成style并标签打到head里。
二 、JS引入:各脚本模块能够选择common.js来书写,并能够直接引入未经编写翻译的模块,比如:jsx,coffee,sass,只要在webpack.config.js中布置好了相应的加载器就行。
编写翻译页面包车型客车进口文件:
require(‘../../css/reset.scss’); //加载开首化样式
require(‘../../css/allComponent.scss’); //加载组件样式
var React = require(‘react’);
var AppWrap = require(‘../component/AppWrap’); //加载组件
var createRedux = require(‘redux’).createRedux;
var Provider = require(‘redux/react’).Provider;
var stores = require(‘AppStore’);
var redux = createRedux(stores);
var App = React.createClass({
render: function() {
return (
<Provider redux={redux}>
{function() { return <AppWrap />; }}
</Provider>
);
}
});
React.render(
<App />, document.body
);

*注意事项

// babel 相关的模块
$ npm install babel-loader babel-preset-es2015 babel-preset-stage-0
babel-preset-react babel-polyfill –save-dev

path: ‘./dist’,

2.2.4 webpack 配置

export default Girls;//ES6

$ webpack
实践结果:

手动打包: webpack 源文件路径 打包路径(webpack ./entry.js
./bundle.js)//那里是从未布署webpack.config.js
$ webpack –watch //监听变动并活动打包 监视webpack.config.js 的变动$
webpack -p //压缩混淆脚本,这些可怜很是重要!

[name] entry 对应的称谓

var index={//那是添加content.js
main:function(){
var html=”1111111″;
return html;
}
}
module.exports=index;

        { test: /\.css$/, loader: "style!css" },
        { test: /\.css$/, loaders: ["style", "css"] },
        // => .css 文件应用  "style" 和 "css" loader  
    ]
}

};

为了让编写翻译的结果名称是唯一的,能够运用 hash 。

*npm install –save 与 npm install –save-dev 的区别

// 第二种 Array
{
entry: [‘./src/index.js’],
output: {
path: ‘./dist/’,
filename: ‘index.js’
}
}

module: { //加载器配置 loaders: [ { test: /.css$/, loader:
‘style-loader!css-loader’ }, { test: /.js$/, loader:
‘jsx-loader?harmony’ }, { test: /.scss$/, loader:
‘style!css!sass?sourceMap’}, { test: /.(png|jpg)$/, loader:
‘url-loader?limit=8192’} ] },

loader 配置

npm i webpack-dev-server –save

亟需添加 –inline 配置参数

webpack-dev-server

var webpack = require(‘webpack’)
module.exports = {
entry: ‘./src/index.js’,
output: {
path: ‘./dist/’,
filename: ‘index.js’
}
}
执行:

扩展:

Uncaught ReferenceError: webpackJsonp is not defined
由来是 html 中并未引用 vendor.bundle.js, 修改 html :

在package.json 设置它的scripts npm run build===webpack(这里是运营打包)

2.2.1 webpack 介绍

npm install webpack –save-dev

在前头创制的目录下实施:

*安装

前面大家早就采取过 jsx loader 了, loader 的施用方式有三种

webpack require 一切
require(“./content.js”); // 添加content.js

别的能源也得以定义为模块

module.exports = “It works from content.js.”;//nodejs中的暴光格局

{
module: {
loaders: [
// => url-loader 配置 mimetype=image/png 参数
{
test: /.png$/,
loader: “url-loader?mimetype=image/png”
}, {
test: /.png$/,
loader: “url-loader”,
query: { mimetype: “image/png” }
}

安装css-loader : npm install css-loader style-loader
require(“style!css!
../css/main.css”)//加载CSS style!css!是宣称这一个模块是CSS
style!css!能够不写 在loaders里面配备音信即可

webpack-dev-server
还提供了模块热加载的形式,在不刷新浏览器的条件下,应用新型的代码更新,运转webpack-dev-server 的时候添加 –inline –hot 参数就足以感受。

**

修改 style.css 中的内容为:

加载器配置

webpack 是 Node 实现,首先须求到 Node.js 下载安装最新版本的 Node.js

*目录

最后的编写翻译结果为:

import “../css/main.css”;//ES6引入情势

缘何要引入新的包裹工具

import MyModule from ‘./modules/MyModule.js’;//es6

$ webpack
会和透过命令执行有同样的出口

贰个位于package.json 的dependencies , 3个坐落devDependencies里面

webpack 提供插件机制,能够对每趟 build 的结果开始展览处理。配置 plugin
的法子为在 webpack.config.js 中加上:

npm install babel-loader babel-core babel-preset-es2015
babel-preset-react –save-dev

热加载 (hot module replacement)

npm i react-dom –save

热加载 (hot module replacement)

entry: {

    page1:["./js/entry.js","./js/double.js"]

},

output: {

}
使用 loader

//这是在另三个文书
var index=require(“./content.js”); // 添加content.js

entry: {
page1: “./page1”,//单个文件方式帮助数组方式,将加载数组中的全体模块,但以最终二个模块作为出口
page2: [“./entry1”, “./entry2”]
},//数组格局 借使使用上边你的写法 无法用上边的那种
output: {
path: “dist/js/page”,
filename: “[name].bundle.js”
}

body {
background: red;
color: white;
}
修改 webpack 配置 entry 添加

{ “scripts”: { “build”: “webpack”, “dev”: “webpack-dev-server –devtool
eval –progress –colors –hot –content-base build” }}

插件系统: webpack
的可定制化在于其插件系统,其本人的好多效果也是通过插件的措施贯彻,插件系统形成了
webpack 的生态,是的能够动用过多开源的第2方插件。

npm i webpack-dev-server –save
npm run dev
在http://localhost:8080监听文件修改
“dev”: “webpack-dev-server –devtool eval –progress –colors –hot
–content-base build”

多少个输入

document.getElementById(“box”).innerHTML=index.main();

webpack 的多个着力:

webpack-dev-server 自动监听(此时还不能够自动刷新浏览器)ctrl+C退出服务

可定制化 -> 能够融为一体第壹方库,能够定制化打包进程

进入到您的门类
将webpack安装到品种的注重中,那样就能够使用项目本地版本的webpack
npm install webpack@1.12.x–save-dev(那种格式是安装钦赐版本)

在铺排文件中配备

那里必要在output模块里面安装publicPath否则CSS背景图片等出口有标题

[chunkhash] chunk 的 hash

*爆出模块使用案例

访问 node.js API

index.html
js / 你的js文件
dist / 你打包的文本(也正是你JS目录下的公文打包后的公文)
手动打包方法

*配备文件

alert('hello world webpack');

*引入模块

一旦唯有3个入口文件,能够有如下二种配备方式

是模块和财富的转换器,它本人是三个函数,接受源文件作为参数,重回转换的结果。那样,大家就能够透过
require 来加载任何类型的模块或文件,比如CoffeeScriptJSX
LESS图片

第1步:npm install 信赖模块

要是急需浏览器自动刷新你要求在配备中追加1个入口点。
webpack.config.js
**entry: [ ‘webpack/hot/dev-server’,
‘webpack-dev-server/client?http://localhost:8080’,
path.resolve(__dirname, ‘app/main.js’) ],

急需集成一些第②方库

多少个输入文件

因为 iframe 的涉及,倘若运用有七个页面,不大概看到眼下利用的 url 音信

页面要引入打包后的途径的JS文件

对此模块打包工具,单一的匡助 CommonJs
的打包在大型项目中是不够用的,为了知足二个大型项目标前端须要,那么1个封装工具应该包括部分那么些功用:

*loader理解

$ npm install xx-loader –save-dev

module.exports = {

webpack 支持 Jsx 和 Es6

module.exports = {

webpack loaders

    publicPath: './dist/',

    filename: "bundle.js"

},

module: {

    loaders: [

        { test: /\.css$/, loader: "style!css" }

    ]

}

// },
/
2 /
/
/ function(module, exports) {
// bootstrap 的始末被追加到模块中
console.log(‘bootstrap file’);

var MyModule = require(‘./MyModule.js’);//commonjs

万物皆模块:在 webpack 的社会风气中,除了
Javascript,别的任何财富都得以用作模块的方法引用

var path = require(‘path’);

loader 能够经过正则表明式只怕文件后缀钦命特定项目标源文件

2.2.10 webpack develop server

entry: "./js/entry.js",

output: {

npm install react –save

新增 loader 能够在 webpack.config.js 的 module.loaders 数组中新增二个loader 配置。

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图