本文是一篇针对webpack新手的教程，通过一个简单的小练习介绍webpack.config.js的配置，包括entry、output、module、plugins和mode等核心概念。讲解了处理不同文件类型的loader，如css、less、图片和html，以及如何使用HtmlWebpackPlugin打包html资源。文章还提到了开发和生产环境的mode设置，并提供了小练习的代码和文件结构。
写在前面：
相信刚刚开始学前端的朋友都听说过webpack，但是仅仅是听说，去找工作的时候面试官又经常问到，自己平时写练习做项目的时候也是直接使用框架中的脚手架、要么工作中打包上线不是自己操作的，对于其中的内容还不是特别了解，这篇文章将通过一个小练习对webpack.config.js的内容进行一个简单的说明，让刚刚开始学习webpack的朋友有一个初步的了解。
webpack.config.js文件作用： webpack配置信息，指示webpack进行哪些操作
webpack——静态模块打包器，通俗地说就是一个打包工具。基础的内容就不多说了，下面通过一个小案例来展示本文的主要内容：
比如我要做一些练习并且通过webpack打包资源输出。文件类型包括html、css、js、图片资源、其他资源（icon图标、字体等）。我们都知道webpack通过webpack五大核心配置从而打包输出文件，入口entry：webpack从这个文件进入，建立依赖图，形成各个文件之间的依赖关系。出口output：是打包之后文件的输出的文件名称以及文件位置。如果把webpack打包比喻成为一个加工工厂，那么entry就是工厂的加工入口，output就是加工完成可以拿出来卖的产品出口渠道，那么在工厂中（webpack）的module、plugins、mode就是加工过程中的工序，每一个不同的产品（文件），都要使用不同的工具，也就是module、plugins等、中的配置项去处理，达到可以加工的完成并出货的目的。我们平时所用的框架脚手架，就相当于工厂里面的自动化机器，已经包含了webpack打包工具不需要你配置，哈哈哈。
在进行产品加工之前，我们必须认识且学会使用加工工具，首先我们必须知道，webpack处理打包js文件是默认可以打包的，不需要使用其他的loader工具，所以接下来逐个介绍处理除了js外的其他文件所需要的工具loader。
module： 配置使用不同的loader，可以理解为在工厂加工中的其中一道工序，里面配置的每一项都是使用不同的loader工具，也就是是产品加工时不同的产品使用不同的工具。那什么是loader呢？loader就是不同类型文件或者模块的处理器，将需要打包的文件或者模块处理为浏览器可以识别并运行的代码。module就是用来个每个产品（文件）分配加工工具（loader）的。以下是最基础的也是初学者必须要记住的常用文件打包需要的loader：
- 1）css文件：css-loader、style-loader；要两个一起使用；
- 2）less（sass）文件：less-loader（sass-loader）、css-loader、style-loader；
- 3）图片文件：url-loader；
- 4）html：html-loader，其实html文件需要用plugins，后面细说。
- 5）其他文件（字体icon等）：file-loader。
plugins： 在产品加工（打包）的过程中用来执行一些特殊任务，如代码分割、静态资源处理、环境变量注入等；
mode： mode有两个选项，我们可以初步理解为：
- 1）mode=production 生产环境，打包的文件经过压缩之后比较小
- 2）mode=development 开发环境，打包的文件比较大，因为没有压缩
简单理解之后，，直接通过一个小栗子看module.exports里面的配置项：
首先使用npm init 初始化练习文件，创建文件如下图：
除了package.json是init生成之外，其他都是手动创建的文件。iconfont.css和tff文件是字体图标文件，图片文件放在img目录下。其次，接下来，我们一如既往的写代码，以下参考：
index.html：
<body>
<h1 id="title">了解webpack</h1>
<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
<img src="./img/img3.jpg" alt="">
最低0.47元/天 解锁文章
扫一扫
8317
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
