持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第3天，点击查看活动详情

虽然是五月的尾巴，但是竟然也算6月更文呢！就很棒哟~😄

前言

身为一个前端小菜鸟，总是有一个飞高飞远的梦想，因此，每点小成长，我都想要让它变得更有意义，为了自己，也为了更多值得的人

开开心心学技术大法~~

来了来了，他真的来了~

正文

说实话，本篇是我之前总结的流程图之再整理内容（因为今天业务真的非常忙，又想白嫖掘金酱的小礼物，so~）。

阅读上直接看流程图更加简单直观，同时为了弥补内容的不足，我在文末附上了完整代码方便理解。代码中有非常丰富的注释内容方便理解。当然，不仅仅有简单的开发环境配置，还有生产环境配置和优化配置，感兴趣的小伙伴可以看下。

webpack开发环境配置

首先明确webpack4中基本资源类型

css
js
json
html
img
font
media

因为webpack天生认识js和json，所以不需要考虑。

css可以通过css-loader，html可以通过html-loader，img可以通过ulr-loader,font、media等其他资源可以通过file-loader

当然，url-loader依赖于file-loader，准确的说，url-loader只是在file-loader上加了一个小文件转为base64的功能，其他功能依然是需要file-loader支持的

css

处理对象：针对import进入js文件的css 处理流程：

sass-loader
- 将sass文件或scss文件转成css文件
less-loader
- 将less文件转成css文件
css-loader
- 将css文件以eval样式字符串的形式打包进js文件
style-loader
- 将js文件中的样式字符串以style标签内联的形式输出到html文件

HTML

处理对象：针对初始入口html

处理流程：通过html-webpack-loader

默认生成一个标准的html文件，通过script引入打包输出的js文件，也就是 output中输出的js文件。如果配置了style-loader，还将自动以sytle标签的形式内联引入打包好的css样式
通过配置template来指定一个html文件为模板，在该html文件中插入script和style等标签

当然，一般来讲还会打开sourceMap，不过由于webpack默认会开启sourceMap功能，所以就不需要额外配置了

图片资源

图片资源分两种方式引入，一种是针对js或css中以路径形式引入的图片，另一种是在html中以路径形式引入的图片资源

1.入口为js或css

处理流程：通过url-loader

依赖file-loader，类似于file-loader功能的补充。主要作用是针对小资源进行base64处理，包括但不限于图片资源
可以将小图片资源转成base64，只需要在options中配置limit即可；可以指定输出文件目录，ouputPath，如果不指定，则默认输出到output的path下
与html-loader的配合，因为html-loader会将图片资源已commonJs的模块输出出来，url-loader默认已esModule来进行处理，所以会导致处理格式不正确，虽然webpack打包不会报错，但是html的图片src会变成[object object]类似的格式，所以需要手动设置url-loader的options属性，esModule：false即可；或者设置html-loader的options属性esModule：true

1.入口为html

处理流程：通过html-loader

处理html中的一些标签元素，如img
将html中引入的外部资源打包成js文件资源，方便其他loader处理，比如url-loader

其他资源

处理对象：除了html、js、css、img之外的资源，包括font资源和其他media资源

处理流程：通过file-loader

因为其他资源格式不限，所以建议用exclude，排除掉html，js和css，其他资源基本都可以通过file-loader来进行解析处理

开发服务器

搭建一个开发服务器可以帮你监听文件改动自动打包编译，并实时reload，当然，你也可以配置HMR(热模块更新)

devServer
- 是跟webpack的entry、output、module、plugins同级的目录
- devServer可以配置一个开发服务器，只在内存中编译打包，不会输出任何资源。可以通过配置devServer来自动化webpack的打包和实时改动刷新，方便本地的开发调试
- - contentBase：默认监听的文件目录
  - port：默认3000，表示开发服务器的端口
  - compress：可以已gzip的方式压缩，减轻浏览器负担
  - open：true在开启devServer的时候自动帮你打开浏览器
  - hot：true表示开始HMR功能，css中需要搭配style-loader来实现，js中可以通过module.hot.accept来实现
- 可以通过命令行webpack-dev-server来启动devServer，也可以录入一个npm script来实现相同的开发操作

负荆请罪之思维导图

负荆再请罪之额外内容

完整代码传送门

结语

往期好文推荐「我不推荐下，大家可能就错过了史上最牛逼vscode插件集合啦！！！(嘎嘎嘎~)😄」

webpack4基础开发环境配置

前言

正文