【webpack】5-如何解析html文件、图片等其他资源

HtmlWebpackPlugin解析html

webpack同样一开始是无法解析html的，需要插件支持HtmlWebpackPlugin

安装

npm i html-webpack-plugin -D

基本使用

const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  plugins: [
    // 只这样写new HtmlWebpackPlugin() 默认会创建一个空的html文件，自动引入打包输出的所有资源（js/css）
    new HtmlWebpackPlugin({
    	title: '百度一下', // 修改index.html的页面名称，但当设置了下面的template后，就会失效了
    	// filename: 'home.html', // 修改index.html的文件名称
        template: './src/index.html', // 加入这行，就会复制./src/index.html文件，并自动引入打包输出的所有资源（js/css），就不会是空的html文件了。也可用绝对地址的来写值path.resolve(__dirname, './src/index.html')
        templateParamters: {
			titleName: '百度一下', // 如果title失效了，就用这个配置，而且还需要在index.html的title标签内容要用动态写法<%= titleName%>
		},
		// publicPath配置也同样支持，功能同output模块
    })
  ]
}

压缩

还可以对html进行压缩操作

const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
	plugins: [
		new HtmlWebpackPlugin({
			template: './src/index.html',
			minify: { // 压缩配置
				collapseWhitespace: true, // 移除空格
				removeComments: true // 移除注释
			}
		})
	]
}

---

图片

主要靠两个loader：url-loader和file-loader。

安装

npm i url-loader file-loader -D

配置

const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  module: {
    rules: [
      {
        test: /.css$/, 
        use: [
          'style-loader', 
          'css-loader',
        ]
      },
      {
        // 处理图片资源
        test: /\.(jpg|png|gif)$/,
        loader: 'url-loader', // 只有一个loader可以这样写
        options: { // 对loader进行配置
          limit: 8 * 1024, // 图片小于8kb，就转成base64
          esModules: false, // 因为url-loader默认用es6模块化语法去解析，而下面的html-loader引入的标签图片是commonjs规范，所以需要把url-loader关闭es6模块化语法，改用commonjs规范
          name: '[hash:10].[ext]', // 默认打包后的图片是个很长的哈希值，可以通过name进行重命名，例子是取前十位，文件格式为原格式
          outputPath: 'imgs' // 意思是在输出的文件夹内新建个imgs文件夹，把打包后的图片资源放里面。
        }
      },
      // 因为光靠url-loader，并不能对html便签src引入的文件进行解析，所以需要通过html-loader解析html文件，引入便签对应的img，才能被url-loader处理
      {
        test: /\.html$/,
        loader: 'html-loader' 
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html' 
    })
  ]
}

base64图片：

以字符串的形式体现，一般8-12kb可以转成base64。

优点有：浏览器自动解析，能减少http请求数量，提高渲染速度，减轻服务器压力。

缺点：图片体积会更大，数量多了页面加载压力会大。

---

其他资源

例如图标、字体等，需要用到file-loader。

安装

npm i file-loader -D

配置

const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  module: {
    rules: [
      {
        test: /.css$/, 
        use: [
          'style-loader', 
          'css-loader',
        ]
      },
      {
        exclude: '/\.(css|js|html|less|png)$/', // 意思是匹配除了()里的所有资源
        loader: 'file-loader',
        options: { // 对loader进行配置
          name: '[hash:10].[ext]' 
        }
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html' 
    })
  ]
}