webpack第一次出现在我的视线，是在一次面试中，当时面试官问我是否了解AMD、CMD、Gulp、webpack ，我当时就懵了，因为在此之前没听说过这些，以前做的只是单纯的网页制作，相对比较简单，当时因为急找工作，也没怎么关注，最近项目需要用到webpack，所以就仔细查了看了官方文档和相关资料，并记录下来以便日后可以查阅。
中文地址外文地址

什么是webpack?

Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。
什么是静态分析？百度百科解释：指在不运行代码的方式下，通过词法分析、语法分析、控制流、数据流分析等技术对程序代码进行扫描，验证代码是否满足规范性、安全性、可靠性、可维护性等指标的一种代码分析技术。
什么是静态资源？参考这篇文章：web资源介绍，即浏览器可以直接解析的html语言，相对应的动态资源就是需要转化为对应的html语言才能被浏览器识别的资源。
因此，Webpack就是可以分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其打包为合适的格式以供浏览器使用。

为什么需要使用webpack？

webpack 依赖关系图

我们从上图可以看到，网页项目中文件之间相互依赖才能正常工作，功能越多，网页越丰富，依赖关系也就越复杂，也就越不利于开发和后期代码的维护，为此前端社区涌现了很多好的实践方法,而webpack则是目前最流行的方法，上图就是就是利用webpack把有依赖关系的各种文件打包成一系列的静态资源。

webpack有什么优点？

同时支持CommonJS和AMD模块；
串联式模块加载器以及插件机制，让其具有更好的灵活性和扩展性，例如提供对CoffeeScript、ES6的支持；
可以基于配置或者智能分析打包成多个文件，实现公共模块或者按需加载；支持对CSS，图片等资源进行打包，从而无需借助Grunt或Gulp
开发时在内存中完成打包，性能更快，完全可以支持开发过程的实时打包需求
对sourcemap有很好的支持，易于调试

有关CommonJS和AMD介绍参考这篇文章：JavaScript模块化编程简史
上面对webpack进行了介绍，下面让我们对其进行实践吧！

webpack的使用

在使用前我们需要对webpack有个整体认识，它是高度可配置的，有四个核心概念：入口(entry)、输出(output)、loader、插件(plugins)，接下来会详细说明。

1.安装

前提条件：确保电脑安装了最新版本Node.js,如何验证是否安装了node呢？打开终端，输入以下命令：node -v，如下图所示：

2.正式使用

接下来我会写个demo从零开始一步步实践webpack，因为我们需要使用node内置的npm（包管理工具）从NPM服务器下载webpack需要的第三方包，而由于国内网络的限制，我们可以使用淘宝镜像进行快速下载，在这里我只介绍一种方法，打开终端输入指令：npm install -g cnpm --registry=http://registry.npm.taobao.org。

首先，在桌面创建一个空文件夹命名为webpack-demo,然后打开终端，输入指令：

cd webpack-demo 
npm init

当执行你npm init指令时，在当前文件夹下自动生成package.json包文件，其定义了这个项目所需要的各种模块，以及项目的配置信息（比如名称、版本、自定义的脚本等元数据），如果你不准备在npm中发布你的模块，这些问题的答案都不重要，回车默认即可。
接下来，在项目中安装webpack，命令如下：
cnpm install --save-dev webpack
这时候我们项目文件中多出了一个node-modules，这个文件夹里有我们需要的各种依赖，
而在package.json文件中多出一个devDependencies字段：

--save-dev 与-dev区别：

当我们使用--save-dev时在package.json文件中多出一个devDependencies字段，使用--save时在package.json文件中多出一个dependencies字段，前者是开发时候依赖的东西，后者是发布之后还依赖的东西。

接下来我们写个小的demo，在项目中创建两个文件夹，一个命名为seller（卖家），一个命名为buyer（买家），在各自的文件夹中创建index.html和index.js，然后建立webpack的配置文件，文件目录如下图：

对项目文件进行打包，只需在终端输入指令：
webpack

这时只需在seller和buyer中各自引入对应的js文件，打开index.html，在浏览器中显示如下：

这个方式不利于开发，因为我们开发时不可避免的多次对代码进行修改，我们可以使用给webpack配置devServer，这样当我们对代码进行修改的时候可以实现实时刷新，在配置前需要安装相关依赖项,在终端输入指令：
npm install webpack-dev-server --save-dev
我们也可以在package.json包文件对npm的脚本部分进行如下图所示进行设置

npm的start是一个特殊的脚本名称，它的特殊性表现在，在命令行中使用npm start就可以执行相关命令，如果对应的此脚本名称不是start，想要在命令行中运行时，需要这样用npm run {script name}如npm run build，当我们在终端输入 npm start指令时，输出结果如下：

此时我们在浏览器中输入localhost:8080/seller/会正常显示出来。

开发总是离不开调试，但是打包后的文件有时我们不容易定位到出错了的地方对应的源代码的位置，webpack 中为我们提供了一个开发工具（Devtool），可以使用source map进行调试，我们只需在webpack.config.js中这样配置：

具体内容请参考：开发辅助调试工具

Loader加载器的使用

webpack 可以使用loader 来预处理文件,允许打包除 JavaScript 之外的任何静态资源，具体内容请查看：loader列表，下面我们在demo中简单体验下loader用法。

首先，安装加载器：

npm install --save-dev css-loader style-loader file-loader

接着，分别在seller和buyer文件夹下创建selller.css和buyer.css,代码如下：
//seller.css

body{
    background: url("/bj.jpg");
}
#content{
    color: coral;
}

//buyer.css

body{
    background: gray;
}
#content{
    color: white;
}

接下来，在webpack中配置如下图所示信息：

最后，分别在buyer 和seller文件夹下的index.js，引入对应的css文件，即require('./XXX.css')
再次打包，启动 ,在终端一次输入以下指令：
webpack
npm start
在浏览器上一次输入：
localhost:8080/buyer/
localhost:8080/seller/
效果图如下：

buyer_css.png

seller_css.png

最后在介绍下Plugin插件

插件目的在于解决loader无法实现的其他事无法实现的其他事

我们打开打包后生成的buyer.bundle.js和seller.bundle.js文件发现内部有许多注释和空行，这会造成打包后的文件很大，这时我们可以使用UglifyJsPlugin插件对其进行压缩,压缩前有900k,压缩后51k，使用插件很简单只需在webpack.config.js中配置如下信息：

压缩后文件格式如下：

以上就是我在这段时间对webpack学习记录，以后会有webpack在react或vue项目中的使用记录，附上github地址：https://github.com/BoryLee/webpack-demo

webpack学习笔记