共计 2406 个字符，预计需要花费 7 分钟才能阅读完成。
对于前端工程化，webpack 一个神奇的工具，既然是个神奇的工具。那我们保留我们的好奇心，来聊一聊它，首先我们要搞清楚 webpack 到底是用来 解决什么问题的 ，然后我们来看看它到底是 怎么做的 ，最后来看看它的 一些基本用法，下面就来侃一侃。
什么是 webpack 以及 webpack 的作用（解决什么问题）
如今 web 前端的业务功能越来越复杂，实现方式也越来越丰富，在 web 页面开发过程中我们通常会引用很多第三方模块以及一些拓展语言（stylus，Scss，JSX…）来简化开发难度，而这些第三方模块和一些拓展语言浏览器不能直接识别，所以要通过经过打包过程生成可以让浏览器识别的格式。
就像一幢居民楼，要建起这样一座居民楼，最基本的材料是砖、瓦、钢筋、混凝土。而要组合这些材料形成一幢建筑，肯定是有一定的方法流程以及工具的，比如第一步先搭建地基，后面用塔吊不断的在地基上叠加完善就形成了一幢建筑。在这个过程中，用到的方法流程以及工具起到的作用就类似于 webpack。
进入正题，webpack 其实就是一个 JavaScript 模块集成工具，同时具有压缩文件以及优化文件结构的作用。经过 webpack 打包生成的 bundle 包，可被浏览器识别解析。
在这个过程中，会用到一些 loaders 解析工具用来预处理一些模块以及拓展语言（例如：stylus、Scss…）, 这些工具的配置使用都是在 webpack 中完成的。其中常用的 loaders 工具有：style-loader、css-loader、stylus-loader。
webpack 实现原理（怎么做的）
原理的理解可以参照上图。
webpack 的最核心的原理：1、一切皆模块 2、按需加载。
- 一切皆模块 webpack 会将源程序按照程序结构分割成一个个独立的小模块，当需要这些小模块时，进行组合重构，避免冗余，达到重复利用。
- 按需加载 传统的打包工具是将所有模块编译生成一个庞大的 bundle.js 文件，这样形成的打包文件体积过于庞大，而 webpack 通过异步加载可以实现按需加载，减小了打包后的体积。
webpack 的使用方法（怎么用它）
在使用 webpack 之前首先要理解四个基本概念：
1. 入口(entry)
webpack 要实现打包，首先我们得指定它的入口，指定入口后，webpack 才会找出那些模块和库是入口起点（直接和间接）的依赖。
接下来我们来看一个最简单的 entry 的配置例子。
webpack.base.config.js
module.exports = {entry: './src/main.js'};2. 出口(output)
出口即配置打包后的输出文件路径，以及如何命名这些文件，默认值为 ./dist。基本上，整个应用程序结构，都会被编译到你指定的输出路径的文件夹中。你可以通过在配置中指定一个 output 字段，来配置这些处理过程：
webpack.base.config.js
const path = require('path');
module.exports = {
entry: './src/main.js',
output: {path: path.resolve(__dirname, 'dist'), // 输出路径
filename: 'output.bundle.js' // 输出文件名
}
};3. loader
loader 能够将非 JavaScript 文件转化为 webpack 识别的 JavaScript 文件，比如讲图片转化为 JavaScript 可调用的格式，或者将一些扩展语言文件转化为浏览器可识别的文件格式。
本质上，webpack loader 将所有类型的文件，转换为应用程序的依赖图（和最终的 bundle）可以直接引用的模块。
在更高层面，在 webpack 的配置中 loader 有两个目标：
- test 属性，用于标识出应该被对应的 loader 进行转换的某个或某些文件。
- use 属性，表示进行转换时，应该使用哪个 loader。
webpack.config.js
const path = require('path');
const config = {
output: {filename: 'my-first-webpack.bundle.js'},
module: {
rules: [{ test: /\.txt$/, use: 'raw-loader'}
]
}
};
module.exports = config;4. 插件(plugins)
loader 被用于转换某些类型的模块，而插件则可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量。插件接口功能极其强大，可以用来处理各种各样的任务。
想要使用一个插件，你只需要 require() 它，然后把它添加到 plugins 数组中。多数插件可以通过选项 (option) 自定义。你也可以在一个配置文件中因为不同目的而多次使用同一个插件，这时需要通过使用 new 操作符来创建它的一个实例。
webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin'); // 通过 npm 安装
const webpack = require('webpack'); // 用于访问内置插件
const config = {
module: {
rules: [{ test: /\.txt$/, use: 'raw-loader'}
]
},
plugins: [new HtmlWebpackPlugin({template: './src/index.html'})
]
};
module.exports = config;其他一些详细用法可以参考 webpack 官方文档。
参考：webpack 中文文档
本文基于自己学习网络中的 webpack 整理的一份基本概念文档，是自己对于 webpack 使用的理解总结，如有问题，烦请评论指正，共同学习，共同进步。????????????????
