一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第10天，点击查看活动详情。
前言
webpack的配置（.npmrc配置、less、sass等样式集成），和在生产环境中插件的配置等，但是我们不要忘了这些还是不够的，比如图片/字体文件的处理、html页面的处理，souceMap应用等，下面为大家挨个介绍
图片和字体文件处理
- url-loader
- file-loader 这两者都可用来处理本地的文件，（图片、字体、音视频等）功能都是一样的，只不过url-loader可以指定在文件大小小于指定的限制时，返回dataURL，不会输出真实的文件，可以减少网络请求。
- 安装
npm i url-loader file-loader -D
- 入口文件 这里我们来引入一个图片，并new一个Image对象，然后把这个对象的src路径指向pic
import pic from './logo.png'
- 添加图片
把图片添加到指定元素中，其中
classList返回的类名
img.classList.add("logo");
var root = document.getElementById("root");
root.append(img);
- 使用 咱们配置的是rules内的test，和use，test配置为仅支持图片格式的后缀（比如：png、jpg、gif、jpeg、svg等等）
test: /\.(png|jpg|gif|jpeg)$/
use:[{
loader:'url-loader',
options:{
limit:10240,
outputPath:'dist'
}
}]
其中loader内仅需配置loader即可，内部会自动调用file-loader，options内的limit，小于此值的文件会自动转换为dataUrl，output为资源输出的目录
注意：limit的设置要合理，太大会导致JS文件加载变慢，需要兼顾加载速度和网络请求次数，如果需要使用图片压缩功能，可以使用image-webpack-loader
- 字体文件处理 比如：css内使用@font-face引入字体文件库，咱们只需要在webpack.config.js中设置test和use就可以实现，和处理图片的不一样！
{
test: /\.(eot|ttf|woff|woff2|svg)$/,
use: "file-loader"
}
html页面处理
这里咱们引用htmlwebpackPlugin插件来实现，它在打包结束后，会自动生成一个html文件，并把打包生成的js模块引入到该html中
-
安装
npm install --save-dev html-webpack-plugin -
配置 title:用来生成页面的title元素; filename：输出的html文件名，默认是index.html; template：模板文件的路径，支持加载器; inject:注入所有的资源到特定的template中;
