webpack15个知识点

一、模块化系统演进:

1、传统:

<script src=“module.js”>标签;

2、commonJS:

协同require()同步加载,再通过exports或module.exports来导出需要暴露的接口;不能加载多个模块;不适合浏览器加载。

3、AMD:

异步require,通过接口define() 异步加载;可并行加载多个模块;适合浏览器。

4、CMD:

类似AMD;

5、UMD:

是模块跨平台解决方案;

6、ES6:

尽量静态化;编译时就能确定模块的依赖关系及输入输出变量;CommonJs和AMD都只能在运行时确定这些东西。
优点:静态分析,提前编译;面向未来的标准;
缺点:
1、浏览器原生兼容性差,所以一般都编译成ES5。
2、目前可以拿来即用的模块少,生态差。

7、期望的模块:

可以兼容多种模块风格,尽量可以利用已有的代码,不仅仅只是 JavaScript 模块化,还有 CSS、图片、字体等资源也需要模块化。

二、gulp&webpack区别:

gulp是基于流的构建工具:all in one的打包模式,输出一个js文件和一个css文件,优点是减少http请求,万金油方案。
webpack是模块化管理工具,使用webpack可以对模块进行压缩、预处理、打包、按需加载等。

三、webpack概念:

webpack是模块化管理工具,使用webpack可以对模块进行压缩、预处理、按需打包、按需加载等。

四、webpack9个特征:

(1)插件化:webpack本身非常灵活,提供了丰富的插件接口。基于这些接口,webpack开发了很多插件作为内置功能。
(2)速度快:webpack使用异步IO以及多级缓存机制。所以webpack的速度是很快的,尤其是增量更新。
(3)丰富的Loaders:loaders用来对文件做预处理。这样webpack就可以打包任何静态文件。
(4)高适配性:webpack同时支持AMD/CommonJs/ES6模块方案。webpack会静态解析你的代码,自动帮你管理他们的依赖关系。此外,webpack对第三方库的兼容性很好。
(5)代码拆分:webpack可以将你的代码分片,从而实现按需打包。这种机制可以保证页面只加载需要的JS代码,减少首次请求的时间。
(6)优化:webpack提供了很多优化机制来减少打包输出的文件大小,不仅如此,它还提供了hash机制,来解决浏览器缓存问题。
(7)开发模式友好:webpack为开发模式也提供了很多辅助功能。比如SourceMap、热更新等。
(8)使用场景多:webpack不仅适用于web应用场景,也适用于Webworkers、Node.js场景。
(9)优点:webpack并不强制你使用某种模块化方案,而是通过兼容所有模块化方案让你无痛接入项目,当然这也是webpack牛逼的地方。
有了webpack,你可以随意选择你喜欢的模块化方案,至于怎么处理模块之间的依赖关系及如何按需打包,放轻松,webpack会帮你处理好的。

五、webpack配置及参数解析:

1、两份配置文件webpack.config.production.js/webpack.config.development.js,然后不同场景下,使用不同的配置文件。
2、通过module.exports返回函数,该函数能接受参数。
相对来说,第一种更简单,但是重复配置多;第二种更灵活,推荐第二种方式。

webpack 如何最佳配置?

webpack官方提供的配置方法是通过module.exports返回一个json,但是这种场景不灵活,不能适配多种场景。比如要解决:production模式和development模式,webpack的配置是有差异的,大致有两种思路。
1、两份配置文件webpack.config.production.js/webpack.config.development.js
,然后不同场景下,使用不同的配置文件。
2、通过module.exports返回函数,该函数能接受参数。
相对来说,第一种更简单,但是重复配置多;第二种更灵活,推荐第二种方式。那么,按返回函数的方式的配置代码架子如下:

module.exports = function(env) {
return { context: config.context,
entry: config.src, output: { path: path.join(config.jsDest, project),
filename: '[name].js',
chunkFilename: '[name].[chunkhash:8].js', publicPath: '/assets/' + project + '/'
},
devtool: "eval", watch: false, profile: true, cache: true, module: {
loaders: getLoaders(env)
},
resolve: {
alias: getAlias(env)
},
plugins: getPlugins(env)
};
}

其中关键的配置这儿简单介绍如下:

context:上下文。
entry:入口文件,是所有依赖关系的入口,webpack从这个入口开始静态解析,分析模块之间的依赖关系。
output:打包输出的配置。
devtools:SourceMap选项,便于开发模式下调试。
watch:监听模式,增量更新,开发必备!
profile:优化。
cache:webpack构建的过程中会生成很多临时的文件,打开cache可以让这些临时的文件缓存起来,从而更快的构建。
module.loaders:如前文介绍,loaders用来对文件做预处理。这样webpack就可以打包任何静态文件。
resolve.alias:模块别名,这样可以更方便的引用模块。
plugins:如前文介绍,webpack的一些内置功能均是以插件的形式提供。

六、webpack样式:

内嵌css(不推荐)、独立的css、公共的css样式;

七、模块化机制特点:

1、可以兼容多模块风格,无痛迁移老项目。
2、一切皆模块,js/css/图片/字体都是模块。
3、静态解析(确定依赖关系,输入输出的变量),按需打包,动态加载。(webpack最优秀的地方);
webpack提供的loaders可以对文件做预处理,从而实现了一切皆模块。

八、webpack对模块做了什么?

(1)非模块化代码;(2)Runtime & 模块;(3)AMD模块;(4)CommonJs;

九、代码分块:chunk--程序块;

(1)CommonJs require.ensure(dependencies, callback);
(2)AMD require(dependencies, callback)

十、分块类型:

(1)入口块 entry chunk;(2)普通块 normal chunk;
(3)初始块 initial chunk;(4)多入口块;

十一、gulp&webpack整合:

1、目的:

前端工程化;更好的管理前端代码;

2、怎么管理:

gulp:处理html压缩/预处理/条件编译,图片压缩,精灵图自动合并等任务;
webpack:管理模块化,构建js/css。

3、怎么整合:

(1)webpack-stream方案[不推荐];
(2)webpack原生方案;

十二、怎么组织代码:

gulp那一套、webpack原生方案;

十三、特别强调--webpack最优秀的地方:

预处理;按需加载;

webpack提供的require()方法和require.ensure()方法来实现,即AMD和commonJS规范;

十四、按需加载的时间戳:

rake任务;

十五、常用插件:

1、解析压缩美化chunk:UglifyJsPlugin new webpack.optimize.UglifyJsPlugin([options]);
2、分离css文件;ExtractTextPlugin var ExtractTextPlugin = require("extract-text-webpack-plugin");
3、删除重复依赖;DedupePlugin new webpack.optimize.DedupePlugin();
4、跳过编译出错并记录;NoErrorsPlugin new webpack.NoErrorsPlugin();
5、提取公共模块;CommonsChunkPlugin new webpack.optimize.CommonsChunkPlugin(options);

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 199,393评论 5 467
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 83,790评论 2 376
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 146,391评论 0 330
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 53,703评论 1 270
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 62,613评论 5 359
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,003评论 1 275
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,507评论 3 390
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,158评论 0 254
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,300评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,256评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,274评论 1 328
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,984评论 3 316
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,569评论 3 303
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,662评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,899评论 1 255
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,268评论 2 345
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 41,840评论 2 339

推荐阅读更多精彩内容

  • 最近在学习 Webpack,网上大多数入门教程都是基于 Webpack 1.x 版本的,我学习 Webpack 的...
    My_Oh_My阅读 8,151评论 40 247
  • 在现在的前端开发中,前后端分离、模块化开发、版本控制、文件合并与压缩、mock数据等等一些原本后端的思想开始...
    Charlot阅读 5,418评论 1 32
  • GitChat技术杂谈 前言 本文较长,为了节省你的阅读时间,在文前列写作思路如下: 什么是 webpack,它要...
    萧玄辞阅读 12,662评论 7 110
  • webpack 介绍 webpack 是什么 为什么引入新的打包工具 webpack 核心思想 webpack 安...
    yxsGert阅读 6,429评论 2 71
  • 不管全世界所有人怎么说,我都认为自己的感受才是正确的,无论别人怎么看,我绝不打乱自己的节奏。喜欢的事自然可以坚持,...
    书声懒懒阅读 206评论 0 1