null-loader 是一个用于 webpack 的 loader，可以将匹配到的文件转换为空模块。这个 loader 在前端开发中非常有用，因为有时候我们会在代码中引入一些并不需要实际执行的模块或文件，例如测试文件或者 mock 数据。在这种情况下，使用 null-loader 可以让我们避免不必要的代码执行，从而提高应用的性能。
安装
在使用 null-loader 之前，需要先安装它。可以通过 npm 进行安装：
npm install null-loader --save-dev
上述命令会将 null-loader 安装到当前项目的 devDependencies 中。
配置
在项目的 webpack 配置文件中，需要添加如下的配置来使用 null-loader：
-- -------------------- ---- -------
-------------- - -
-- ---
------- -
------ -
-
----- --------------
---- --------------
--
--
--
--上述配置表示如果 webpack 在打包过程中遇到了匹配规则为 /\.mock\.js$/ 的文件，就会使用 null-loader 将其转换为空模块。
示例
假设我们有如下的目录结构：
- src/
- index.js
- utils.js
- __mocks__/
- api.js其中，src/index.js 文件中引入了 src/utils.js 和 src/__mocks__/api.js 两个文件：
import { sayHello } from './utils';
import api from './__mocks__/api';
sayHello();
api.get('/user');现在我们需要将 src/__mocks__/api.js 文件转换为空模块，以避免它的代码被执行。为了达到这个目的，我们可以在 webpack 配置中添加如下的规则：
-- -------------------- ---- -------
-------------- - -
-- ---
------- -
------ -
-
----- -----------------------
---- --------------
--
--
--
--上述配置表示如果 webpack 在打包过程中遇到了匹配规则为 /\/__mocks__\/.*\.js$/ 的文件，就会使用 null-loader 将其转换为空模块。这样，在输出的 JavaScript 文件中，src/__mocks__/api.js 中的代码就不会被包含进去。
总结
null-loader 是一个非常有用的 webpack loader，可以帮助我们在前端开发中避免一些不必要的代码执行，提高应用的性能。在使用时只需要简单地安装和配置即可，非常方便。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/43322