Open easonhuang123 opened 6 years ago
（在过去）对我这种渣渣来说，在项目里面一旦配置好了webpack之后，就再也不想碰这玩意儿了，因为实在是太多的坑。。。使用一个插件可能要把config文件改个十几二十遍，还得不断地跑起来看是不是生效了，有时候突然生效了也不知道原因是啥-.-反正下次再配的时候又会不记得。。
笔者对webpack是又爱又恨啊（应该很多读者也有一样的想法吧hhhh）又不得不去使用它，所以在前端的学习路上一路与webpack斗智斗勇，因而有了这篇wbpack的学习笔记，以下是笔者在实践中还有参考了无数优秀的webpack相关文章写下的笔记，假如有不当之处请及时指出～谢谢🙏💗
webpack可以说是一个模块打包器，让你可以放心地写你的前端项目，放心地使用社区上最流行的库，模块，插件，框架等等。不用担心，webapck都会根据你的项目帮助你将其打包好，打包好的文件可以直接提供给浏览器使用噢。
我们要告诉webpack它应该从哪里开始构建我们的项目，所以我们要指定一个或多个js文件作为入口文件（parcel是可以以html和js作为入口文件），然后webpack就会从入口文件开始构建其内部依赖，形成一个依赖图。
webpack构建好后会生成称为bundles的文件中，所以我们需要告诉webpack出口文件放在哪个位置，如何命名等规则。
bundles
因为webpack本身只认识JavaScript文件，loader可以帮我们把其他类型的文件转化为它能处理的模块，包括图片，字体，css，ES6，ts，vue模版等。不同的文件会有不同的loader去转化。当然你可以在每个loader按照粒度去配置你的逻辑，但是要注意书写顺序等小问题噢（也就是说会有很多各种各样的小坑等着你）
都说插件是webpack的支柱功能，它负责完成loader无法完成的其他事项。我们可以在插件里引入webpack自带的一些优化插件，例如CommonsChunkPlugin，DllPlugin等，还有一些需要我们自己install的插件（也属于webpack生态圈中的），例如ExtractTextWebpackPlugin，HtmlWebpackPlugin等（更多可以看看官网的介绍https://webpack.docschina.org/plugins ），还有就是一些webpack社区中一些优秀的插件例如happyPack，ImageminPlugin等。。。可能对一些刚刚入门的同学来说有点看不懂，不过没所谓，慢慢来，你以后都会用上的～
CommonsChunkPlugin
DllPlugin
ExtractTextWebpackPlugin
HtmlWebpackPlugin
happyPack
ImageminPlugin
大概意思就是自动剔除一些我们程序中不会用上的多余代码，而webpack可以结合一些能够删除未引用代码的插件（例如uglifyJS），帮助我们完成这个事情。例如你import了一个js文件但是只用了里面的其中一个函数，webpack打包的时候就会只打包那个函数的代码而不是整个js文件。
webpack能够按需对代码进行分离，还能动态的并行的去加载这些文件，（合理应用的情况下）这能让我们大大提高加载效率。我们可以通过入口起点的直接分离，动态引入模块，提取公共模块等方式进行代码分离～
我们在开发的时候，出现bug时当然是不想看着打包后的代码来调试的（而且不一定看得懂），我们希望的是我们能在本地起一个服务，直接调试自己的源代码，明确追踪到每一行代码，而且能做到改完代码保存后能马上看到效果，而不是要刷新整个页面或者整个项目跑一遍，而webpack可以帮我们做到这一点。
要完全理解webpack整个构建过程是有难度的，这需要你去学习webpack的源码，这里简单地说一下webpack的执行过程:
webpack先识别我们写的配置表选项，进行一系列的初始化
webpack从入口文件开始进行编译，递归解析对应依赖的文件，需要进行预处理的文件会根据配置的loader去转换
根据不同块之间的依赖进行分组，分成不同的chunk
chunk
将不同的chunk转成对应的输出文件
plugin会贯穿这个编译的过程，会在适当的时机调用适当的插件
对于详细地结合源码分析，日后会继续和大家学习与分享～
前言
（在过去）对我这种渣渣来说，在项目里面一旦配置好了webpack之后，就再也不想碰这玩意儿了，因为实在是太多的坑。。。使用一个插件可能要把config文件改个十几二十遍，还得不断地跑起来看是不是生效了，有时候突然生效了也不知道原因是啥-.-反正下次再配的时候又会不记得。。
笔者对webpack是又爱又恨啊（应该很多读者也有一样的想法吧hhhh）又不得不去使用它，所以在前端的学习路上一路与webpack斗智斗勇，因而有了这篇wbpack的学习笔记，以下是笔者在实践中还有参考了无数优秀的webpack相关文章写下的笔记，假如有不当之处请及时指出～谢谢🙏💗
webpack是？了解一下
webpack可以说是一个模块打包器，让你可以放心地写你的前端项目，放心地使用社区上最流行的库，模块，插件，框架等等。不用担心，webapck都会根据你的项目帮助你将其打包好，打包好的文件可以直接提供给浏览器使用噢。
四个核心
我们要告诉webpack它应该从哪里开始构建我们的项目，所以我们要指定一个或多个js文件作为入口文件（parcel是可以以html和js作为入口文件），然后webpack就会从入口文件开始构建其内部依赖，形成一个依赖图。
webpack构建好后会生成称为
bundles的文件中，所以我们需要告诉webpack出口文件放在哪个位置，如何命名等规则。因为webpack本身只认识JavaScript文件，loader可以帮我们把其他类型的文件转化为它能处理的模块，包括图片，字体，css，ES6，ts，vue模版等。不同的文件会有不同的loader去转化。当然你可以在每个loader按照粒度去配置你的逻辑，但是要注意书写顺序等小问题噢（也就是说会有很多各种各样的小坑等着你）
都说插件是webpack的支柱功能，它负责完成loader无法完成的其他事项。我们可以在插件里引入webpack自带的一些优化插件，例如
CommonsChunkPlugin，DllPlugin等，还有一些需要我们自己install的插件（也属于webpack生态圈中的），例如ExtractTextWebpackPlugin，HtmlWebpackPlugin等（更多可以看看官网的介绍https://webpack.docschina.org/plugins ），还有就是一些webpack社区中一些优秀的插件例如happyPack，ImageminPlugin等。。。可能对一些刚刚入门的同学来说有点看不懂，不过没所谓，慢慢来，你以后都会用上的～引人注目的几大特性
tree shaking
大概意思就是自动剔除一些我们程序中不会用上的多余代码，而webpack可以结合一些能够删除未引用代码的插件（例如uglifyJS），帮助我们完成这个事情。例如你import了一个js文件但是只用了里面的其中一个函数，webpack打包的时候就会只打包那个函数的代码而不是整个js文件。
code split
webpack能够按需对代码进行分离，还能动态的并行的去加载这些文件，（合理应用的情况下）这能让我们大大提高加载效率。我们可以通过入口起点的直接分离，动态引入模块，提取公共模块等方式进行代码分离～
开发环境
我们在开发的时候，出现bug时当然是不想看着打包后的代码来调试的（而且不一定看得懂），我们希望的是我们能在本地起一个服务，直接调试自己的源代码，明确追踪到每一行代码，而且能做到改完代码保存后能马上看到效果，而不是要刷新整个页面或者整个项目跑一遍，而webpack可以帮我们做到这一点。
构建&执行过程
要完全理解webpack整个构建过程是有难度的，这需要你去学习webpack的源码，这里简单地说一下webpack的执行过程:
webpack先识别我们写的配置表选项，进行一系列的初始化
webpack从入口文件开始进行编译，递归解析对应依赖的文件，需要进行预处理的文件会根据配置的loader去转换
根据不同块之间的依赖进行分组，分成不同的
chunk将不同的
chunk转成对应的输出文件plugin会贯穿这个编译的过程，会在适当的时机调用适当的插件
对于详细地结合源码分析，日后会继续和大家学习与分享～