webpack理解

写一篇关于webpack的基础文章，希望对刚刚入门的同学有用~~
话不多说，开始

webpack的理解

• 是一种前端资源构建工具，也是一种静态模块打包化工具

webpack的五个核心概念

• Entry
• 入口(Entry)指示Webpack以哪个文件为入口起点开始打包，分析构建内部依赖图
• Output
• 输出(Output)指示Webpack打包后的资源bundles输出到哪里去，以及如何命名
• Loader
• Loader让Webpack能够去处理那些非Javascript文件(webpack自身只能解释JS)
• Plugins
• 插件(Plugins)可以用执行范围更广的任务，插件的范围包括，从打包优化和压缩一直到重新定义环境种的变量等
• Mode
• 模式(Mode)指示Webpack的使用相应模式的配置
• 模式分为两种:
• 开发模式(development)：能让代码本地调式运行的环境
• 生产模式(production)：能让代码优化上线运行的环境

总结：

• 先看下大致步骤：
• Entry - > Loader -> Plugins -> Output
• 解释：
• 首先，以webpack构建项目，需要运行的话，首先得先配置下webpack基本环境。需要自己在根目录下创建webpack.config.js进行基本配置。
• 第一步，我们应该告诉webpack的入口起点Entry从哪里开始打包这个项目
• 第二步，我们需要使用css，less，sass这些css样式和图片，需要通过Loader去翻译成webpack能识别的资源
• 第三步，而如果将样式，图片需要压缩，则需要通过Plugins(插件)将进行压缩处理(也可以把它当作可以完成特别复杂，特别强大的事)
• 第四步，有输入自然就有输出，我们需要将打包好的资源bundles通过Output指定输出到哪里去

webpack的基本原理介绍完之后，接着实操才是最重要的，我会在一篇文章介绍下图片，css，html，其他资源的打包过程