为什么要使用webpack
当前的浏览器要加载一个网页，除了JS之外，还会涉及到很多的依赖包，其中有些是没办法浏览器直接解析的（scss、typescript等），webpack就是支持通过分析项目结构，将所有的依赖模块打包，转化为合适的格式供浏览器使用。
webpack是什么
webpack是一个用于现代 JavaScript 应用程序的静态模块打包工具。什么是静态模块呢？其实是指静态资源所组成的模块，而静态资源包含我们前端常见到的字体、css、icon、图片等，这些都能够被webpack通过依赖关系进行整理和打包，最后形成一个或多个bundle文件供浏览器加载。
如何使用webpack打包
想要了解webpack打包的过程，首先需要了解webpack中的一些基本配置。之前我们提到webpack是通过处理文件间的依赖关系，然后递归的方式生成一张依赖关系图，根据这个来找到整个项目所依赖的资源并做对应的模块化打包。所以这其中就必定涉及到相关的配置，这些配置通常都是在一个webpack.config.js的文件中，基本的配置如下。
var webpack = require('webpack');
module.exports = {
//entry（入口）——webpack根据entry的配置来确定从哪些文件开始处理依赖关系，通常的默认值是./src/index.js。
//支持一个或多个入口起点，entry的值可以是string | object | array
entry: [
'webpack/hot/only-dev-server',
'./js/app.js'
],
//output（出口）——output用于配置模块化处理之后的文件生成路径及生成的bundle的文件名
output: {
path: './build',
filename: 'bundle.js'
},
//loader（模块加载）——webpack本身可以理解JS和JSON文件，但是对于其他比如css、JSX之类的需要通过对应的loader来解析并将其转换为有效的模块。
//在配置了对应的loader后，也需要记得通过npm安装对应的loader。
//loaders
module: {
rules: [
//在解析时，如果碰到require()/import去引入.txt文件，就使用row-loader去解析
{
test: /\.txt$/, use: 'raw-loader' }
]
},
//模块解析，webpack提供了默认的依赖解析，但是也支持可配，下面简单介绍两种。更多的配置还是请查看官方文档。
resolve:{
// 尝试按顺序解析这些后缀名。方便用户在做相关后缀明文件引入的时候，可以不用带后缀文件名。
extensions:['','.js','.json']，
// 创建 import 或 require 的别名，来确保模块引入变得更简单。
//下面的配置，当我们需要在文件中引入src/utilities/路径下的文件是，可以直接引入，而不需要再添加src/utilities/这一段前缀目录，简化了引入的路径长度。
alias: {
Utilities: path.resolve(__dirname, 'src/utilities/'),
Templates: path.resolve(__dirname, 'src/templates/'),
},
},
//plugins(插件)则可以用于执行范围更广的任务，包括：打包优化，资源管理，注入环境变量等。plugin是作为loader的一种重要补充。
//携带参数/选项，你必须在 webpack 配置中，向 plugins 属性传入一个 new 实例。
plugins: [
new webpack.NoErrorsPlugin()
]
};
其他注意点
webpack兼容性
webpack 支持所有符合 ES5 标准 的浏览器（不支持 IE8 及以下版本）。webpack 的 import() 和 require.ensure() 需要 Promise。如果你想要支持旧版本浏览器，在使用这些表达式之前，还需要 提前加载 polyfill。
缓存
webpack在处理打包的时候，每次文件系统访问文件都会被缓存，以便于更快触发对同一文件的多个并行或串行请求。在 watch 模式 下，只有修改过的文件会被从缓存中移出。如果关闭 watch 模式，则会在每次编译前清理缓存。这也能解释，为什么我们第一次本地启动项目的时候，启动速度会偏慢，但是后面很快的原因。
关于webpack更加详细的内容以及如果使用webpack去搭建一个Vue的项目等配置流程，都可以参考文末的链接。
整理不易，欢迎一键三连哟～
资料参考：