Webpack学习笔记

以下是github上webpack 1.x的相关文档的中文翻译，Preethi Kasireddy的文章的中文翻译以及webpack中文指南的学习笔记。

本文是我对于webpack的初步认识，仅供参考

JavaScript的组件（modules）

项目中的组件就像书的章节，每个组件之间尽可能地减少了耦合性，去除了命名空间的影响，并且能够复用。

组件捆绑器

Webpack是一个组件捆绑器（module bundling/bunder），根据某种组件模版（module pattern/ MP）将组件打包起来的一种“策略”。

笼统来讲，MB是将一些组件以正确的顺序，捆绑为单一文件的process。…… Browserify（MP： CommonJS）, RequireJS（MP：AMD）, Webpack 都是MB。（源）

为何不用其他的组件捆绑器？

已有的组件捆绑器对于大型项目，特别是大型单页面应用来说并不非常适合。开发另一个组件捆绑器的最为重要的原因是Code Splitting，静态资源需要在模块化的同时无缝的整合。

我尝试了现有的组件打包器，但是不可能实现所有的目标：

1. 将支持树分为根据需求加载的代码块；

2. 保证首次加载时间短；

3. 每一个静态资源需要成为一个模块；

4. 能够将第三方库编码为模块；

5. 能够定制几乎组件打包器的每一部分；

6. 支持大型项目。

Webpack有何不同？

1. 代码分块 - Code Splitting

webpack在项目的支持树中有两个主要支持：同步以及异步。异步模块作为区分要点以及形成一个新的模块。

对于大型网页，将所有代码放到单一文件并不是非常高效，特别是如果一些代码块只在一些情况下需要。Webpack有一种根据需求，将你的代码分为“块”的特性。其他的打包器将它们称为“层”，“汇总”或者“碎片”。这种特质被称为“代码分块”。

2. 加载器 - Loaders

webpack原生只支持JavaScript，但是加载器（loaders）可以将其他资源转换成JavaScript。通过这么做，所有的资源能形成一个模块。

3. 智能解析 - Clever parsing

Webpack有一个智能解析器能够处理几乎所有的第三方库。和甚至允许表达式例如require("./templates/" + name + ".jade")。其包括最为公用的组件方式（module styles/module pattern）：CommonJs以及AMD。

所谓的MS/MP，就是用于模拟“类”的概念，这方便我们存储公用的以及私有的方法以及变量在一个单独的对象中。（来源）

4. 插件系统 - Plugin system

webpack有丰富的插件生态。大部分的内部特性是基于插件系统中。这允许你定制你的webpack，将通用组件作为开源的形式分享出来。

---

Webpack的基础：插件的使用

具体方式是通过npm install [插件名] --save-dev 下载所需要的插件，然后根据插件文档，在webpack.config.js文件中使用插件。有很多插件可以使用，例如：

1. 管理资源的插件：

style-loader 和 css-loader用于处理CSS文件。

file-loader，可以轻松地将图片信息，例如背景和图标，混合到 CSS 中。

2. 管理输出的插件：

HtmlWebpackPlugin 创建了一个全新的文件，所有的 bundle 会自动添加到 html 中。

clean-webpack-plugin帮助程序员在每次build的时候清理dist文件夹。

Webpack的开发环境搭建

在开发环境中，我们需要具有强大的、具有实时重新加载(live reloading)或热模块替换(hot module replacement)能力的 source map 和 localhost server。

source map：用于 webpack 打包源代码后，帮助开发人员追踪到错误和警告在源代码中的原始位置。通过在webpack.config.js中加入devtool: 'inline-source-map'来引入。

观察模式：通过在build: "webpack"中加入--watch参数，能够让webpack自动编译修改后的模块，刷新浏览器生效。

webpack-dev-server ：提供了一个简单的 web 服务器，并且能够实时重新加载(live reloading)，不用刷新浏览器也能生效。

webpack-dev-middleware：提供了一个可以修改接口名称的web 服务器，包括一个自定义的express服务（server.js）。

webpack-dev-server + webpack-hotModuleReplacementPlugin(HMR，webpack自带)：在主js代码中使用module.hot.accept('小组件的相对位置' + 使用这个组件的函数) 

webpack-dev-server + Node.js API

HMR + 管理资源的插件

Webpack的生产环境搭建

在生产环境中，我们的目标则转向于关注更小的 bundle，更轻量的 source map，以及更优化的资源，以改善加载时间。