webpack 复习（六）常用扩展

常用插件

• clean-webpack-plugin：清除输出目录（output 目录）

const { CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports = {
	plugins: [
	  new CleanWebpackPlugin(),
	],
}

• html-webpack-plugin：自动生成 html 文件，同时会在 html 中自动进入 js 文件

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

module.exports = {
	plugins: [
	  new HtmlWebpackPlugin({
	      filename: 'pages/index.html', // 页面输出目录
	      template: './src/test.html', // 页面模板
      }),
	],
}

• copy-webpack-plugin：复制静态资源（图片、svg 等静态资源）
  • webpack 5.0 以上，使用插件 10.0 以下版本，高版本会有兼容性问题。

const CopyPlugin = require("copy-webpack-plugin");
module.exports = {
	plugins: [
	  new CopyPlugin({
	      patterns: [
	        { from: "./public", to: "assets" },
	      ],
      }),
	],
}

开发服务 webpack-dev-server

webpack-dev-server 是一个辅助工具，它既不是 plugin 也不是 loader。它的作用是提高开发者的调试效率。

官方文档不迷路 webpack-dev-server。

比如，修改源码之后，需要先手动打包，然后再去运行打包后的项目。每次修改代码之后都需要手动打包，该流程很繁杂不方便调试。webpack-dev-server 就是解决该问题。

webpack-dev-server 是在 webpack 内部搭建一个本地服务，用于调试。每次用户修改源码时，会自动打包，并把打包结果部署到本地服务，模拟真实服务。

webpack-dev-server 发生在 webpack 编译完成之后，输入之前。

来自灵魂画手的图：

在 webpack.config.js 中的常用配置：

• devServer：配置项，用于配置 webpack-dev-server
• static：最终打包结果文件目录
• port：服务端口号
• open：服务器启动时，是否打开主页面

module.exports = {
  devServer: {
    static: {
      directory: path.join(__dirname, 'dist'),
    },
    port: 9000,
    open: true,
  },
}

普通文件处理

假如，js 文件中有如下代码：

import png from './assets/img/webpack.png';
console.log(png);

导入的内容是什么呢？如果 webpack.config.js 中没有处理图片的 loader，直接写上面的代码，webpack 在编译时一定会报错。报错的原因很简单，webpack 不认识读出来的内容。

如何解决呢？类似的问题在之前的笔记中有提到过，webpack 不识别的内容，使用 loader 处理。使用 loader 把图片进行转换即可解决问题。这里介绍下处理类似问题的两个常用 loader：

• file-loader-loader：
• url-loader

file-loader

生成依赖的文件到输出目录，然后将模块文件设置为：导出一个路径；file-loader

伪代码：

// file-loader
function loader(source){
	// source：文件内容（图片内容 buffer）
	// 1. 生成一个具有相同文件内容的文件到输出目录
	// 2. 返回一段代码   export default "文件路径"
}

处理结果：

使用：

module.exports = {
	module: {
		rules: [
	      {
	        test: /\.(png)|(jpe?g)|(gif)$/i,
	        use: [
	          {
	            loader: 'file-loader',
	            options: {
	              name: 'imgs/[name].[hash:5].[ext]', // 文件（图片）输出目录
	            },
	          }
	        ],
	      }
		]
	}
}

url-loader

将依赖的文件转换为：导出一个base64格式的字符串；url-loader

伪代码：

// url-loader
function loader(source){
	// source：文件内容（图片内容 buffer）
	// 1. 根据buffer生成一个base64编码
	// 2. 返回一段代码   export default "base64编码"
}

处理结果：

使用：

module.exports = {
	module: {
		rules: [
	      {
	        test: /\.(png)|(jpe?g)|(gif)$/i,
	        use: [
	          {
	            loader: 'url-loader',
	            options: {
	              limit: false,
	            },
	          }
	        ],
	      }
		]
	}
}

注意： url-loader 的内部使用了 file-loader，当文件大小超过 url-loader 的处理大小时，内部自动使用file-loader 处理文件。