webpack 入门实践（三）

目标：如何将 image 通过 webpack 部署到生产环境，以及将 html 文件部署到生产环境

基本：熟悉 js 的 web 前端工程师

工具：visual studio code， 已经了一段时间，小巧玲珑，功能强大，非常好用，最初为 javascript typescript 而生，也可以通过安装插件配置来支持很多语言，我用他写 js， python go 和 groovy。非常好用，强烈推荐给 web 前端开发人员，以后有机会给大家分享其玄机所在，他也是 js 写的 CS 应用。非常好用（重要的事情说三遍） 。

继续我们 webpack ，我现在 index.html 文件中添加一个 img 标签来显示一张图片。如下图

然后安装所需的依赖

html-loader ：html 加载器

html-webpack-plugin：将生产环境的 css 和 js 自动引入到加载到生产环境的 html 文件。

file-loader ： 文件加载器

clean-webpack-plugin：清除 webpack 文件

我们还需做些准备工作，在之前 index.html 存在项目根目录下，并不是和 js 和 css 一起放在 src 文件下，使用 webpack 对 src 中的 css 和 js 打包后， index.html 也并不在 dist 文件夹中，这不是我们想要的，我们希望开发时 html 也同 js 和 css 一样，放置到 src 文件夹下，webpack 打包后，html 也会出现在 dist 文件中，并且自动引入打包好的 js 和 css。

1. 去掉 html 之前的 css 和 js 的引用

将 index.html 也放置在 src 文件夹下

然后来加载图片文件，jpg|png 表示接受 jpg 和 png 文件，在选项中我们配置加载后的文件名称，outputPath 为将文件复制到的文件夹的位置，publicPath 表示图片相对于index.html 引用的路径。

我们引入 html-webpack-plugin 插件.

然后在 plugins 中直接实例化一个 html-webpack-plugin，配置要加载 html 的位置

运行 npm run build:prod 将项目打包到 dist 文件下，运行后没有错误提示，说明成功将项目部署到生产环境。文件夹机构如下图，我们发现 img 和 index.html 都在 dist 文件夹中。

并且在 index.html 自动地引用了 css 和 js 文件。

最后添加 cleanWebpackPlugin 插件，该插件将在每次打包前清除旧的文件。