# 前言
Webpack 是一个现代 JavaScript 应用程序的静态模块打包器 (module bundler)，使用 Webpack 可以对模块进行压缩、预处理、按需打包、按需加载等。
当 Webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。
# Webpack 构建 React+Mobx+Scss 开发环境源码
# 通过本章读者可以学习了解到什么？
- Webpack 核心概念以及基本配置。
- Webpack 性能优化策略，主要分为构建性能和构建包性能（大小和按需加载）两大部分
- 搭建 React + Mobx + Scss 开发环境 ，实践讲解如何构建一个主流开发环境， 如何一步步完善 webpack 性能
当前前端主流构建工具有 Browserify, Grunt, Gulp,Webpack 和 Rollup
数据采集到2019年2月2日，最近半年数据指标
横向对比这几种构建工具，webpack 在构建工具还是占据主导地位，整个生态相对完善，同时可以自定义业务构建需要的 plugin 和 loader 。
# Webpack基础
从 Webpack 4 开始，可以不用引入一个配置文件, 可以实现零配置运行（之前 webpack 的配置复杂一直引起诟病），大多数项目会需要复杂的设置来支持开发环境定制，这也是他的强大之处。
在 Webpack 需要理解四个核心概念：入口(entry)， 输出(output)，加载器(loader)，插件(plugins)。
# Webpack 四个核心概念
# 入口(entry)
入口起点(entry point) 是指 Webpack 应该使用哪个模块，来作为构建其内部依赖图的开始，Webpack 会找出有哪些模块和 library 是入口起点（直接和间接）依赖的。
可以通过在 webpack 配置 中配置 entry 属性，来指定一个入口起点（或多个入口起点），默认值为./src。
接下来我们看一个 entry 配置的最简单例子：webpack.config.js
module.exports = {
entry: 'src/copy.js'
};
# 输出(output)
output 属性告诉 Webpack 在哪里输出它所创建的 bundles，以及如何命名这些文件，默认值为 ./dist。基本上，整个应用程序结构，都会被编译到指定的输出路径的文件夹中。
你可以通过在配置中指定一个 output 字段，来配置这些处理过程：
webpack.config.js
const path = require('path');
module.exports = {
entry: './src/copy',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
}
};
