这个配置能够完成简单的页面构建，各种资源打包优化(页面，CSS，JS,图片，字体)

初始化一个webpack项目

npm init
npm install --save-dev webpack webpack-cli

webpack目录结构

Webpack 学习目录：从入门到精通的学习路线

大家在开发前端项目的时候，随着项目的不断更新迭代以及产品经理的不断提需求，势必会用到各种各样的第三方库，那么我们用到的第三方库越来越多，整体项目的依赖也就会越来越多，整体项目打包的时候体积也就会越来越大，用webpack去build的时候时间也会越长。

针对新手入门搭建项目，Webpack5 配置手册（从0开始）

模块化

概述

前言:

1. 之前所学习的,每次都需要手动地打包,
2. 如果现在修改了开发代码以后,页面不会有任何变化,

webpack-dev-server的使用可以参考（https://www.npmjs.com/package/webpack-dev-server）

Webpack-dev-server主要是在开发时候用，实时热加载的，仅用于开发。

这个组件如果实现热加载都很简单，这我贴出我几个改动的地方：