Webpack

MODULE BUNDLER

什么是Webpack

前端应用程序的模块化打包器

为什么要用Webpack

构建功能丰富的前端应用，拥有复杂的js代码和大量的依赖包。

一些简化开发复杂度的实践：

为什么要用Webpack

上述的方式可以大大提高开发效率，但是浏览器并不能直接识别这些扩展语言开发的文件！

打包类工具的出现

其他流行的的打包工具：Gulp、Grunt

Webpack和Grunt/Gulp的比较

Grunt/Gulp 是一种能够优化前端开发流程的工具

Webpack和Grunt/Gulp的比较

Webpack 是一种模块化的解决方案

如何使用Webpack

//全局安装

npm install –g webpack

//安装到当前项目

npm install --save-dev webpack

基础命令

webpack {入口文件} {打包输出文件}

仅需要指定一个入口文件，webpack将自动识别指定入口文件中所有的依赖

通过配置文件来使用

webpack.config.js

    module.exports = {
        entry: "./app/main.js",//指定入口文件
        output: {
            path: __dirname + "/public",//文件输出目录
            filename: "bundle.js"//输出文件的文件名
        }
    }
                        

更快捷的执行打包

通过npm引导任务执行

在package.json的script部分添加webpack命令

四个核心概念

一、Entry(入口)

webpack 将创建应用程序所有依赖的关系图表(dependency graph)。

图表的起点就是入口，入口文件将告诉webpack从哪里开始，并遵循依赖关系图表进行打包。

四个核心概念

二、Output(出口)

指定webpack将打包后的资源输出的位置

四个核心概念

三、Loaders(加载器)

Loaders会将对应的资源转换为模块，然后添加到依赖图表中。

Loaders需要单独安装，并且需要在webpack.config.js的module.rules下进行配置

test：匹配loader所处理的文件的正则表达式(必须)

use：指定loader及配置其选项(必须)

exclude：排除不需要处理的文件或者目录(可选)

常用的Loaders

四个核心概念

四、 Plugins(插件)

Plugins是具有apply属性的js对象，apply会被webpack compiler调用，并且 compiler 对象可在整个 compilation 生命周期访问

Plugins需要单独安装，并且需要在webpack.config.js的plugins下进行配置

常用的Plugins

如何调试

配置devtool，让webpack打包时生成source maps

devtool选项	配置结果
source-map	在一个单独的文件中产生一个完整且功能完全的文件。这个文件具有最好的source map，但是它会减慢打包文件的构建速度；
cheap-module-source-map	在一个单独的文件中生成一个不带列映射的map，不带列映射提高项目构建速度，但是也使得浏览器开发者工具只能对应到具体的行，不能对应到具体的列（符号），会对调试造成不便；
eval-source-map	使用eval打包源文件模块，在同一个文件中生成干净的完整的source map。这个选项可以在不影响构建速度的前提下生成完整的sourcemap，但是对打包后输出的JS文件的执行具有性能和安全的隐患。不过在开发阶段这是一个非常好的选项，但是在生产阶段一定不要用这个选项；
cheap-module-eval-source-map	这是在打包文件时最快的生成source map的方法，生成的Source Map 会和打包后的JavaScript文件同行显示，没有列映射，和eval-source-map选项具有相似的缺点；

文件修改监听

使用devserver搭建本地服务器，让浏览器监听代码的修改并自动刷新

npm install –save-dev webpack-dev-server

devserver配置选项	功能描述
contentBase	默认webpack-dev-server会为根文件夹提供本地服务器，如果想为另外一个目录下的文件提供本地服务器，应该在这里设置其所在目录（本例设置到“public"目录）
port	设置默认监听端口，如果省略，默认为"8080"
compress	设置为true，一切服务都启用gzip压缩
proxy	代理 URL
historyApiFallback	在开发单页应用时非常有用，它依赖于HTML5 history API，如果设置为true，所有的跳转将指向index.html

参考文档

webpack中文文档：https://doc.webpack-china.org/

webpack入门: http://www.jianshu.com/p/42e11515c10f

webpack原理与实战：http://web.jobbole.com/91653/

Thanks