来聊聊webpack吧！

在前端开发中，往往会用到一些构建工具，构建工具有很多，比如Npm
Script任务执行者、Grunt也是任务执行者、Gulp基于流的自动化构建工具、Fis3百度构建工具、Webpack打包模块化JavaScript工具和Rollup模块打包工具。
今天，我们来聊聊最耳熟能详的webpack构建工具。

一、全面理解webpack

1、什么是webpack？

webpack是近期最火的一款模块加载器兼打包工具，它能把各种资源，例如JS（含JSX）、coffee、样式（含less/sass）、图片等都作为模块来使用和处理,它能有Grunt或Gulp所有基本功能。
webpack的官网是 https://webpack.github.io/ ，文档地址是https://webpack.github.io/docs，
官网对webpack的定义是MODULE BUNDLER，他的目的就是把有依赖关系的各种文件打包成一系列的静态资源。 请看下图：

Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。

从图中我们可以看出，Webpack 可以将多种静态资源 js、css、less 转换成一个静态文件，减少了页面的请求。

2、webpack的优势

其优势主要可以归类为如下几个：

• webpack 是以 commonJS 的形式来书写脚本滴，但对 AMD/CMD 的支持也很全面，方便旧项目进行代码迁移。
• 支持很多模块加载器的调用，可以使模块加载器灵活定制，比如babel-loader加载器，该加载器能使我们使用ES6的语法来编写代码;less-loader加载器，可以将less编译成css文件；
• 开发便捷，能替代部分 grunt/gulp 的工作，比如打包、压缩混淆、图片转base64等。
• 可以通过配置打包成多个文件，有效的利用浏览器的缓存功能提升性能。

3、webpack较之其他类似工具有什么不同？

• 有同步和异步两种不同的加载方式
• Loader,加载器可以将其他资源整合到JS文件中，通过这种方式，可以讲所有的源文件形成一个模块
• 优秀的语法分析能力，支持 CommonJs AMD 规范
• 有丰富的开源插件库，可以根据自己的需求自定义webpack的配置

4、webpack的目标是什么？

• 将依赖的模块分片化，并且按需加载
• 解决大型项目初始化加载慢的问题
• 每一个静态文件都可以看成一个模块 可以整合第三方库 能够在大型项目中运用
• 可以自定义切割模块的方式

二、webpack的安装

1、全局安装

npm install -g webpack webpack-cli

2、安装后查看版本号

webpack -v

此时，我们的电脑上就安装好了webpack了，接下来让我们再看看在项目中怎么用吧。

三、初始化项目

1、创建webpack文件夹

进入webpack目录，执行命令

npm init -y

2、创建src文件夹

3、src下创建common.js

exports.info = function (str) {
    document.write(str);
}

4、src下创建utils.js

exports.add = function (a, b) {
    return a + b;
}

5、src下创建main.js

const common = require('./common');
const utils = require('./utils');
common.info('Hello world!' + utils.add(100, 200));

那么好，此时webpack已经在项目中添加成功了。

webpack的核心是什么呢？

• 入口（entry），指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始。
• 出口(output)，告诉 webpack在哪里输出它所创建的 bundles，以及如何命名这些文件。
• loader, 将所有类型的文件，转换为应用程序的依赖图（和最终的bundle）可以直接引用的模块。
• 插件, 在 webpack 打包过程中增加额外的功能。

好的，以上就是我对于webpack的理解了，希望大家共同进步，共同成长！