模块化三—前端构建工具webpack应用原理

一 webpack在实际项目中的配置使用与优化：前端打包工具webpack基础使用

webpack仅有下面5个比较核心的概念，掌握了这5个概念，你就能够很轻松的配置webpack

1. Entry:入口(Entry)指示 webpack 以哪个文件为入口起点开始打包，分析构建内部依赖图。
2. Output：输出(Output)指示 webpack 打包后的资源 bundles 输出到哪里去，以及如何命名。
3. Loader：Loader 让 webpack 能 够 去 处 理 那 些 非 JavaScript 文 件 (webpack自身只理解JavaScript)。 
4. Plugins:插件(Plugins)可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩， 一直到重新定义环境中的变量等。
5. Mode：模式(Mode)指示 webpack 使用相应模式的配置。

二 webpack内部不同plugins和loader的作用：webpack相关面试题

1 Loader与Plugin不同：

作用不同：

• Loader: webpack默认只能打包处理JS文件，或者JS模块。但是像CSS模块和图片模块需要loader工具处理；loader就是打包那些webpack默认打包不了的模块的工具。
• Plugin：可以扩展webpack的功能，让webpack具有更多的灵活性。 在 Webpack 运行的生命周期中会广播出许多事件，Plugin 可以监听这些事件，在合适的时机通过 Webpack 提供的 API 改变输出结果。

用法不同：

• Loader在module.rules中配置，也就是说他作为模块的解析规则而存在。
• Plugin在plugins中单独配置。 类型为数组，每一项是一个plugin的实例，参数都通过构造函数传入。