共计 2785 个字符，预计需要花费 7 分钟才能阅读完成。
前言
webpack 是一个现代 JavaScript 应用程序的静态模块打包器 (module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。
webpack 学习的一个比较难的点便是它的配置与配置的组合，本文总结了 webpack 中的常用，主流的配置，并简单介绍了 webpack 在项目中的应用。可以帮助初学者快速的定位所需要的功能，当然每个加载器（loader）插件（plugins）的功能详解用法限于篇幅不能展示，建议大家去 npm 官网查看其最新配置。
因为这方面内容较多，本文会不断迭代。大家可以收藏加关注，并在评论中指出优化的地方。非常感谢
注意：本文基于 webpack4
npm 官网地址：https://www.npmjs.com/
babel：https://www.babeljs.cn/1. 常用 loader 及功能
babel-loader @babel/code @babel/preset-env babel-polyfill(严格上是个插件)
js 语法转换工具，可以将 ES6 或更高级的语法转换成浏览器支持的语法
css-loader
处理入口文件中的 css
style-loader
处理文件模块中的 style 样式
postcss-loader
第一个就是前面提到的把 CSS 解析成 JavaScript 可以操作的 抽象语法树结构（Abstract Syntax Tree，AST），第二个就是调用插件来处理 AST 并得到结果。
file-loader
处理引入的静态文件，可以按目录分类
url-loader
同 file-loader，处理引入的静态文件，还可以把小文件转换为 base64 格式的 URL，从而减少网络请求次数。url-loader 依赖 file-loader。
eslint-loader
语法检测 loader，会在打包或编译的时候提示语法问题
2. 常用插件及功能
autoprefixer
一款自动管理浏览器前缀的插件，它可以解析 CSS 文件并且添加浏览器前缀到 CSS 内容里，使用 Can I Use（caniuse 网站）的数据来决定哪些前缀是需要的。
html-webpack-plugin
当使用 webpack 打包时，创建一个 html 文件，并把 webpack 打包后的静态文件自动插入到这个 html 文件当中。
mini-css-extract-plugin
将 CSS 提取为独立的文件的插件，对每个包含 css 的 js 文件都会创建一个 CSS 文件，支持按需加载 css 和 sourceMap
optimize-css-assets-webpack-plugin
压缩优化 css
uglifyjs-webpack-plugin
压缩优化 js
webpack-dev-server
启动一个本地临时的服务器，可以设置端口，支持热更新（将 HotModuleReplacementPlugin 插入到进程中），
CleanWebpackPlugin
能帮忙每次打包之前先删除 dist 文件夹。
copyWebpackPlugin
可以把其他的文件或文件夹拷贝到打包文件里
bannerPlugin（webpack）
版权字符串
ignorePlugin
忽略掉引入的包
webpack-merge
可以抽取出 开发与生产环境的相同的 webapck 配置。vue 里的配置文件 dev.config.js，prod.config.js 就基于这个插件
html-withimg-plugin
处理 html 中的 img
definePlugin
定义环境变量
dllPlugin
在一个额外的独立的 webpack 设置中创建一个只有 dll 的 bundle(dll-only-bundle)。这个插件会生成一个名为 manifest.json 的文件，这个文件是用来让 DLLReferencePlugin 映射到相关的依赖上去的。
DLLReferencePlugin
这个插件是在 webpack 主配置文件中设置的，这个插件把只有 dll 的 bundle(们)(dll-only-bundle(s)) 引用到需要的预编译的依赖。
happypack
多线程打包
3. 开发中常用的功能
跨域解决
webpack-dev-server 中有 proxy 代理
webpack-dev-server 中有 before(mock 功能) 拦截请求模拟数据
使用中间件 webpack-dev-middleware 把本地的 webpack 配置到 server
路径简写
reslove :{
alias:{'img':resolve('src')
}
}
- import xxx form '../../../aaa'
+ import xxx form '@/aaa'热更新
webpack-dev-server 中配置 inline：true
或添加插件 webpack.HotModuleReplacementPlugin(),
懒加载
添加插件 @babel/plugin-syntax-dynamic-import
let button = document.createElement("button");
button.innerText = "播放";
button.addEventListener("click", function() {
// es6 草案中的语法，用 jsonp 实现动态加载文件, 需要插件 @babel/plugin-syntax-dynamic-import
import("./source.js").then(data => {
// promise 对象
console.log(data.default); // 挂载在了 default 属性上
});
});
document.body.appendChild(button);4.webpack 打包优化
既能提升速度，又能减小体积
1 去除映射文件 sourceMap
devtool：false
2 外部引用 cdn
速度优化
1 大文件预打包
dllPlugin DLLReferencePlugin
2 多线程打包
happypack
3babel-loader 开启缓存
// webpack.config.js
use: [{
loader: 'babel-loader',
options: {cacheDirectory: true}]// .bablerc
{
"presets": [
"env",
"react"
],
"plugins": ["transform-runtime"]}
4resolve ailas 添加常用包的路径
体积优化
1 按需加载
babel-plugin-import
2 写代码时使用 import 引入而不是 require
3 异步加载资源
const Foo = () => import(‘./Foo.vue’)；
4 抽离公共模块
optimization splitchunks
