简介webpack五个核心概念

简介webpack五个核心概念

参考网址:

https://mp.weixin.qq.com/s/v7YQ2937jsebx9CROaLePg

1、entry

入口entry指示webpack以哪个文件为入口起点开始打包，分析构建内部依赖图。

2、output

输出output指示webpack打包后的资源bundles输出到哪里去以及如何命名

3、loader

loader让webpack能够去处理那些非JavaScript文件(webpack自身只能理解javascript和json文件，无法处理css和img等，一处理就报错所以需要借助loader翻译一下，将css和img翻译成webpack能够看懂的东西，这时候webpack就能够去处理打包这些资源)，loader只能翻译，如果需要做一些功能更强大的事，需要使用插件完成。

4、plugins

plugins插件可以用于执行范围更广的任务，插件的范围包括从打包优化和压缩，一直到重新定义环境中的变量等

以上四个概念总述大体功能：有一个项目文件，没办法直接运行，比方说有less写的，它里面有一些ES6的Module直接运行会报错的，所以这时候要告诉它webpack的入口起点entry，它会以这个入口起点开始打包整个项目，打包的时候遇到less资源怎么办呢，有一个loader，加载一个loader，loader会替我们将less编译成webpack能够识别的资源，这时候webpack就能识别了，比如遇到图片通过loader编译成webpack能够识别的资源这时候就能处理，将来我们可能需要压缩代码，将样式文件压缩起来此时需要借助插件进行压缩处理，用插件做一些功能更加复杂更加强大的事，做完之后输出的资源叫bundle，但bundle是我们在webpack里面做好的，最终通过output指定这些资源去哪。

5、mode

模式（Mode）指示webpack使用相应模式的配置

选项	描述	配置
development	会将process.env.NODE_ENV的值设为development，启用NamedChunksPlugin和NamedModulesPlugin	能让代码在本地调试
production	会将process.env.NODE_ENV的值设为production。启用FlagDependcyUsagePlugin,FlagIncludedChunksPlugin,ModuleConcatenationPlugin,NoEmitOnErrorsPlugin，OccurrenceOrderPlugin,SideEffectsPlugin和UglifyJsPlugin	能让代码优化上线