webpack概念

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第5天，点击查看活动详情

webpack概念

webpack是一个现代JavaScript应用程序的 静态模块打包器 。在最初的前端工程中是没有打包工具的，一个文件就相当于一个模块，最终这些文件需要按照一定的顺序使用script标签引入html，如果顺序不对就会导致依赖变量丢失等错误问题，比如jQuery就是这样，所有依赖jQuery的文件都需要在jQuery之后引入，不然就无法使用Jquery。随着node.js的出现和发展，前度工程化更加完善，因为node.js拥有操作文件的能力，于是出现了这类基于node.js运行的打包工具（gulp、grunt，以及现在最流行的webpack）。所以webpack本质就是为我们打包js的引用，而我们常听到各种loader、各种plugin、热更新、热模块替换等等都是webpack的一个升华，使得webpack能为我们提供更多的帮助。

常见的一些概念

• loader webpack本身只能打包js和json格式的文件，但实际项目中我们还有会css、scss、png、ts等其他文件，这时我们就需要使用loader来让它正确打包。常用的loader有style-loader，css-loader，sass-loader，ts-loader，babel-loader...

• plugin

  plugin可以在webpack运行到某个阶段时候，帮你做一些事情，类似react/vue中的生命周期。具体的某个插件（plugin）就是在webpack构建过程中的特定时机注入扩展逻辑来改变构建结果，作用于整个构建过程。

• Chunk

  它不是库也不是插件，它就是一个名词，顾名思义就是代码块。为什么要单独把他拎出来说呢，因为你明白它以后你自然就能理解webpack中配置一些参数的意思了

• webpack-dev-server

  webpack-dev-server是利用node的http server模块的功能实现了一个本地服务器，时项目具备了一个本地服务的功能，基于此实现模块的热更新

• 热更新

  当修改文件内容是，泡在浏览器中的模块能实时局部替换，而不用完全重载整个页面，热更新极大的提高了前端开发的效率

• chunk

  它不是库也不是插件，它就是一个名词，顾名思义就是代码块。其实就是代表了webpack打包的一个过程