共计 2429 个字符，预计需要花费 7 分钟才能阅读完成。
首先,webpack 是什么？
webpack 是模块化管理工具，使用 webpack 可以对模块进行压缩、预处理、按需打包、按需加载等。
为什么使用 webpack?
对 CommonJS、AMD、ES6 的语法做了兼容；
对 js、css、图片等资源文件都支持打包；
串联式模块加载器以及插件机制，让其具有更好的灵活性和扩展性，例如提供对 CoffeeScript、ES6 的支持；
有独立的配置文件 webpack.config.js；
可以将代码切割成不同的 chunk，实现按需加载，降低了初始化时间；
支持 SourceUrls 和 SourceMaps，易于调试；
具有强大的 Plugin 接口，大多是内部插件，使用起来比较灵活；
webpack 使用异步 IO 并具有多级缓存。这使得 webpack 很快且在增量编译上更加快；
webpack 最常用与 spa 应用，主要是 vue 和 React，其实它就非常像 Browserify，但是将应用打包为多个文件。如果单页面应用有多个页面，那么用户只从下载对应页面的代码. 当他么访问到另一个页面, 他们不需要重新下载通用的代码。
webpack 也能用于服务端，但是构建后端代码一般都不会用 webpack，坑太多了，所以正常情况下只用于前端
webpack 和 gulp 的区别
gulp 是基于流的构建工具：all in one 的打包模式，输出一个 js 文件和一个 css 文件，优点是减少 http 请求，万金油方案。webpack 是模块化管理工具，使用 webpack 可以对模块进行压缩、预处理、打包、按需加载等。
webpack 的特征？
插件化：webpack 本身非常灵活，提供了丰富的插件接口。基于这些接口，webpack 开发了很多插件作为内置功能。速度快：webpack 使用异步 IO 以及多级缓存机制。所以 webpack 的速度是很快的，尤其是增量更新。丰富的 Loaders：loaders 用来对文件做预处理。这样 webpack 就可以打包任何静态文件。高适配性：webpack 同时支持 AMD/CommonJs/ES6 模块方案。webpack 会静态解析你的代码，自动帮你管理他们的依赖关系。此外，webpack 对第三方库的兼容性很好。代码拆分：webpack 可以将你的代码分片，从而实现按需打包。这种机制可以保证页面只加载需要的 JS 代码，减少首次请求的时间。优化：webpack 提供了很多优化机制来减少打包输出的文件大小，不仅如此，它还提供了 hash 机制，来解决浏览器缓存问题。开发模式友好：webpack 为开发模式也提供了很多辅助功能。比如 SourceMap、热更新等。使用场景多：webpack 不仅适用于 web 应用场景，也适用于 Webworkers、Node.js 场景。
基本的使用
const path = require(‘path’);
module.exports = {
entry: “./app/entry”, // string | object | array
// Webpack 打包的入口
output: {// 定义 webpack 如何输出的选项
path: path.resolve(__dirname, “dist”), // string
// 所有输出文件的目标路径
filename: “[chunkhash].js”, // string
//「入口 (entry chunk)」文件命名模版
publicPath: “/assets/”, // string
// 构建文件的输出目录
/* 其它高级配置 */
},
module: {// 模块相关配置
rules: [// 配置模块 loaders，解析规则
{
test: /\.jsx?$/, // RegExp | string
include: [// 和 test 一样，必须匹配选项
path.resolve(__dirname, “app”)
],
exclude: [// 必不匹配选项（优先级高于 test 和 include）
path.resolve(__dirname, “app/demo-files”)
],
loader: “babel-loader”, // 模块上下文解析
options: {// loader 的可选项
presets: [“es2015”]
},
},
},
resolve: {// 解析模块的可选项
modules: [// 模块的查找目录
“node_modules”,
path.resolve(__dirname, “app”)
],
extensions: [“.js”, “.json”, “.jsx”, “.css”], // 用到的文件的扩展
alias: {// 模块别名列表
“module”: “new-module”
},
},
devtool: “source-map”, // enum
// 为浏览器开发者工具添加元数据增强调试
plugins: [// 附加插件列表
// …
],
}
以上简单配置主要有一下几点：
Entry：指定 webpack 开始构建的入口模块，从该模块开始构建并计算出直接或间接依赖的模块或者库
Output：告诉 webpack 如何命名输出的文件以及输出的目录
Loaders：由于 webpack 只能处理 javascript，所以我们需要对一些非 js 文件处理成 webpack 能够处理的模块，比如 sass 文件
Plugins：Loaders 将各类型的文件处理成 webpack 能够处理的模块，plugins 有着很强的能力。插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量。但也是最复杂的一个。比如对 js 文件进行压缩优化的 UglifyJsPlugin 插件
Chunk：coding split 的产物，我们可以对一些代码打包成一个单独的 chunk，比如某些公共模块，去重，更好的利用缓存。或者按需加载某些功能模块，优化加载时间。在 webpack3 及以前我们都利用 CommonsChunkPlugin 将一些公共代码分割成一个 chunk，实现单独加载。在 webpack4 中 CommonsChunkPlugin 被废弃，使用 SplitChunksPlugin
