一、模块化系统演进：
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)；
网友评论