背景

通常，我们在开发一个应用的时候，会有生产环境与开发环境的概念，生产环境中，我们需要体积最小的代码，以及图片等静态文件使用cdn上的服务，开发环境上，需要热更新，source-map等来快速排错，目标不同。

背景

由于，我们在开发过程中，会引入很多大大小小的模块，比如一个计算方法通用的大包，封装了很多很多的方法，但是我们只用到了其中一两个方法，往往希望，打包只打包使用到的方法，未使用到的方法，不被打包进最后的代码中，以保持体积的最小化。

背景

在上一节中，已经能够生成一个能够自动重新编译本地服务器了，但是，有一个问题，在项目写的比较大的时候，每次打包的时间就会变得很长，为了解决这个问题，webpack也支持使用模块热替换的方式来进行差异修改，也就是热更新，可以在每次修改的时候，只重新刷新修改的那一部分，这样刷新的速度就会变得很快了。

背景

在我们的开发中，很多的代码会频繁的变动，如果每次改动都使用npm run build来打包的话，是一件效率很低的事情，而且这个服务，一般来说，打包的时候，才需要使用，因此需要一个本地服务的，可以快捷的看到打包后的内容

之前已经简单的了解了webpack中配置文件、loader、插件、如何安装了

前面已经说明了，webpack是一个打包工具

前面已经说明了，webpack是一个打包工具

webpack可以使用配置文件，也就是名为webpack.config.js的文件，webpack.config.js也是遵循CommonJS规范的

概念

webpack 的配置文件，也就是名为webpack.config.js的文件中，有一个module的属性配置，可以在此属性内，配置相关的规则

这样就得到了一个安装上了webpack及其脚手架的项目