Webpack 入门
webpack是什么？
webpack 是模块化管理工具，使用webpack可以对模块进行压缩、预处理、按需打包、按需加载等。
webpack有哪些重要特征？
插件化：webpack非常灵活，提供了丰富的插件接口。基于这些接口，webpack开发了很多插件作为内置功能。
速度快：webpack使用异步IO以及多级缓存机制。
丰富的loaders:loaders用来对文件做预处理。这样webpack可以打包任何静态文件。
高适配性：webpack同时支持AMD/CommonJs/ES6 模块方案。webpack会静态解析你的代码，自动帮你管理它们的依赖关系。
代码拆分：webpack可以将你的代码分片，从而实现按需打包。这种机制可以保证页面值加载需要的js代码，减少首次请求时间。
优化：他提供了很多优化机制来减少打包输出的文件大小，他还提供了hash机制解决浏览器缓存问题。
开发模式友好：提供了很多辅助功能，比如SourceMap 、热更新等。
webpack如何最佳配置？
由于production模式和development模式，webpack的配置是有差异的，有两种方式（推荐第2种）。
- 两份配置文件
webpack.config.production.js/webpack.config.development.js，然后不同场景下，使用不同的配置文件。 - 通过module.exports返回函数，该函数能接受参数。
按返回函数的方式的配置代码架子如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
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和gulp的区别
gulp是基于流的构建工具：all in one 的打包模式，输出一个js文件和一个css文件，优点是减少http请求。
webpack是模块化管理工具，使用webpack可以对模块进行压缩、预处理、打包、按需加载。