webpack系列(4)--处理html

处理html

前面，在演示的时候，都是先打完包，然后在打包后的目录中，手动创建html文件，并且手动引入js文件；在实际项目的时候，这种方式是行不通的。

这里，我们需要使用html-webpack-plugin插件，帮助我们处理html文件。

html-webpack-plugin

• 安装html-webpack-plugin

  npm i html-webpack-plugin -D

• 在配置文件中补充如下代码：
  ```js
  // … 省略代码
  const HtmlWebpackPlugin = require(‘html-webpack-plugin’)

module.exports = {
// … 省略代码
plugins:[
new HtmlWebpackPlugin()
]
}

执行打包命令后，我们发现，在打包目录中，会自动生成`index.html`，并且自定引入了打包后的js文件。
但是，自动生成的html文件中，实际是空的，在实际项目中，可定会包含结构。
我们可以通过配置该插件的`template`来实现，按照某个模板HTML生成打包后的文件。
修改配置文件中的代码：
```js
module.exports = {
  // ... 省略代码
  plugins:[
    new HtmlWebpackPlugin({
      template:path.resolve(__dirname,'src/index.html')
    })
  ]
}

html-loader处理html的资源文件

在html中，可能会引入很多资源文件，比如img标签引入的图片，video标签引入的视频等等。

html的资源文件默认是不会通过webpack的处理的，那么我们在打包后，可能会因为对应的资源文件没有一起打包到目录下，而无法访问。

使用html-loader即可解决。

• 安装html-loader

  npm i html-loader -D

• 添加loader配置

{
  test:/\.html$/i,
  loader:'html-loader'
}

直接运行打包命令即可，HTML中引入的图片，将自动被之前配置的url-loader处理，其他的资源文件，可使用单独配置file-loader处理，比如视频资源：

{
  test:/\.(mov|mp4)$/i,
  loader:'file-loader',
  options:{
    name:'[hash:10].[ext]',
    outputPath:'videos'
  }
}

copy-webpack-plugin处理HTML的资源文件

处理HTML中资源文件的另一种方案是使用copy-webpack-plugin。如同其名字一样，是将资源文件拷贝到某个目标目录下。

在配置文件中，添加如下代码：

// ... 省略代码
const CopyWebpackPlugin = require('copy-webpack-plugin')
// ... 省略代码
plugins: [
  new CopyWebpackPlugin([
    {
      from: path.resolve(__dirname, '../public/static'),
      to: path.resolve(__dirname, '../dist/static'),
    },
  ]),
],