我们在部署项目时，部署的是build中的文件，并不会将我们src/index.html作为访问的入口，因此，我们需要将index.html移动到build下，但是简单的复制过去是不行的，由于文件目录的不同，如果使用了相对路径，那么就会找不到文件。这时候我们就可以用到webpack的插件 html-webpack-plugin，它可以将我们src/index.html作为模版，生成一份新的index.html在build下。
具体的用法请查看
在本例只是简单使用。
执行
npm i --save-dev html-webpack-plugin
之前我们是将index.html中的js入口指定为build/bundle.js,使用这个插件后，我们设置它直接指向Main.js
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Hi webpack4!</title> </head> <body> <script src = "Main.js"></script> </body> </html>
/* webpack.config.js */ var path = require('path'); var appPath = path.resolve(__dirname, './src/Main.js'); var buildPath = path.resolve(__dirname, './build'); const HtmlWebpackPlugin = require('html-webpack-plugin') module.exports = { entry: appPath,//整个页面的入口文件 output: { path: buildPath,//打包输出的地址 filename: "bundle.js",//输出的文件名称 }, module: { rules: [ { test: /\.js$/, loader: 'babel-loader?presets=es2015' } ] }, plugins: [ new HtmlWebpackPlugin({ /* template 参数指定入口 html 文件路径，插件会把这个文件交给 webpack 去编译， webpack 按照正常流程，找到 loaders 中 test 条件匹配的 loader 来编译，那么这里 html-loader 就是匹配的 loader html-loader 编译后产生的字符串，会由 html-webpack-plugin 储存为 html 文件到输出目录，默认文件名为 index.html 可以通过 filename 参数指定输出的文件名 html-webpack-plugin 也可以不指定 template 参数，它会使用默认的 html 模板。 */ template: './src/index.html', /* 因为和 webpack 4 的兼容性问题，chunksSortMode 参数需要设置为 none https://github.com/jantimon/html-webpack-plugin/issues/870 */ chunksSortMode: 'none' }), ] }
输入指令打包我们会发现，build下的index.html已经生成,并且指向了编译的后js
使用webpack打包图片和文件
我们新增资源文件夹asset 并添加一张图片
import {Dog} from "./Dog"; class Main { constructor() { document.write("Hi webpack4 + ES6!"); console.info("Hi webpack4 + ES6"); let dog = new Dog(); document.write("<img src=https://www.jb51.net/article/\"./asset/atlas.png\"/>"); } } new Main();
并将图片展示到页面
图裂了，找不到资源，大家应该都猜到了，应为在编译时，直接将<img src=https://www.jb51.net/article/\"./asset/atlas.png\"/> 添加到了build/index.html，build下并没有asset包，所以找不到资源。难道我们需要在build下在建立一个资源文件夹吗？答案是不用，webpack可以对图片的路径进行转换和图片打包。
输入指令
npm install url-loader --save-dev npm install file-loader --save-dev
/*webpack.config.js*/ var path = require('path'); var appPath = path.resolve(__dirname, './src/Main.js'); var buildPath = path.resolve(__dirname, './build'); const HtmlWebpackPlugin = require('html-webpack-plugin') module.exports = { entry: appPath,//整个页面的入口文件 output: { path: buildPath,//打包输出的地址 filename: "bundle.js",//输出的文件名称 }, module: { rules: [ { test: /\.js$/, loader: 'babel-loader?presets=es2015' } , { //url-loader的主要功能是：将源文件转换成DataUrl(声明文件mimetype的base64编码) //小于limit字节，以 base64 的方式引用，大于limit就交给file-loader处理了 //file-loader的主要功能是：把源文件迁移到指定的目录（可以简单理解为从源文件目录迁移到build目录 test: /\.(jpg|png|gif)$/, loader: 'url-loader?limit=8192&name=asset/[hash:8].[name].[ext]' } ] }, plugins: [ new HtmlWebpackPlugin({ /* template 参数指定入口 html 文件路径，插件会把这个文件交给 webpack 去编译， webpack 按照正常流程，找到 loaders 中 test 条件匹配的 loader 来编译，那么这里 html-loader 就是匹配的 loader html-loader 编译后产生的字符串，会由 html-webpack-plugin 储存为 html 文件到输出目录，默认文件名为 index.html 可以通过 filename 参数指定输出的文件名 html-webpack-plugin 也可以不指定 template 参数，它会使用默认的 html 模板。 */ template: './src/index.html', /* 因为和 webpack 4 的兼容性问题，chunksSortMode 参数需要设置为 none https://github.com/jantimon/html-webpack-plugin/issues/870 */ chunksSortMode: 'none' }), ] }
编译后的目录如下(新增一张较大的图片book用于展示file-loader)
页面效果如下，图是随便找的，见谅。
注意:当我们引入一些资源需要使用变量引用时，像这样引用的话是会编译失败的
图片并没有像上图一样打包到asset中
当我们在require一个模块的时候，如果在require中包含变量，像这样：
require("./asset/" + name + ".png");
那么在编译的时候我们是不能知道具体的模块的。但这个时候，webpack也会为我们做些分析工作：
1.分析目录：'./asset'；
2.提取正则表达式：'/^.*\.png$/'；
于是这个时候为了更好地配合wenpack进行编译，我们应该给它指明路径
使用webpack打包css文件
就像图片一样，webpack也提供了样式文件的打包，
npm install style-loader --save-dev npm install css-loader --save-dev