简介
name-all-modules-plugin 是一个可以对 webpack 构建的模块进行命名的插件，使得每个模块都有强有力的可追踪的名称。这个插件可以使用在任何具有目录结构和构建需要的项目中，是前端项目构建中不可或缺的工具之一。
安装
在项目目录下使用 npm 命令进行安装：
npm install --save-dev name-all-modules-plugin
使用方法
配置
在 webpack.config.js 文件中进行如下配置：
const NameAllModulesPlugin = require('name-all-modules-plugin'); module.exports = { // .... plugins: [ new NameAllModulesPlugin(options), ] }
其中 options 参数代表插件的配置项，可以传入以下参数：
prefix：模块名称前缀，默认值为module_。savePath：保存文件路径，文件为常量映射的 js 文件，必须为相对路径，默认值为./。saveName：保存文件名，默认值为module_name_map.js。reportFileName：生成的模块映射文件，文件名和路径，默认为false。
其中 reportFileName 参数设置为 false 后生成的模块映射文件将不会保存在硬盘中，仅用于包装过程中的调试。
使用
在源码中使用时，可以按照如下的方式导入需要的模块：
import moduleName from 'module_1' import { subModule } from 'module_2'
其中 module_1 和 module_2 是在插件的作用下自动命名产生的。
示例
假设当前项目的目录结构如下所示：
-- -------------------- ---- ------- ------- --- ------------ --- --- - --- -------- - --- ---------- - - --- --------- - - --- -------- - --- ----- - - --- ------- - --- ------ - --- -------- - --- --------- --- -----------------展开代码
在 webpack.config.js 中进行如下配置：
-- -------------------- ---- ------- ----- -------------------- - ----------------------------------- -------------- - - ------ ----------------- ------- - --------- ------------------- -- -------- - --- ---------------------- ------- ------- --------- ----- --------- --------------------- --- -- ------- - ------ - - ----- ---------- ---- ---------------- -------------- -- -- -- --展开代码
在 ./src/index.js 文件中进行如下导入：
import Button from 'app_Button' import { max } from 'app_math' import 'app_styles_main.css'
构建完成后，在项目的根目录下会生成一个 module_name_map.js 文件，内容类似于：
module.exports = { "app_Button": 0, "app_math": 1, "app_styles_main": 2 }
这样其他模块就可以通过访问这个变量来获得对应模块。
意义与指导
使用 name-all-modules-plugin 可以提高项目的可维护性和可读性。通过对模块进行命名，使得每个模块都有一个清晰的命名，让代码更加可读，并且可以在代码中快速定位对应的模块。
这个插件还能够生成一个 module_name_map.js 文件提供给其他程序使用，方便其他同事进行调试和维护。是一个非常有用的工具，建议大家在前端项目构建中都加入这个插件。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedb4b9b5cbfe1ea0611348
