面试官：你自己配置过webpack吗？有哪些核心配置？

西红柿炖前男友
1,488 阅读4分钟

一.Webpack.config.js重点配置

1.entry入口

用来指定打包入口文件，默认为./src/index.js，需要注意的是，entry后面可以接数组和对象,如果是数组的话，那么不管你有几个入口文件，最后只打包成一个。如果是对象的话，那么最终打包是多文件，你有几个入口，就打几个包。

image.png

结果是这样的：

image.png

2.output出口

用于定义打包后文件的输出位置和格式，也就是对你的dist包，进行相应配置

image.png

01. filename: '[name].js'

  • 含义：指定输出文件的名称格式。
  • [name] ：这是一个占位符，表示 Webpack 会根据 entry 入口对象中的键名来动态生成文件名。例如，如果 entry 中定义了 main 和 vendor 两个入口，那么输出的文件名将是 main.js 和 vendor.js。
  • 作用：确保每个入口文件（例如 main.js 和 vendor.js）都能生成独立的输出文件。

02. path: path.resolve(__dirname, 'dist')

  • 含义：指定输出文件的目录路径。
  • __dirname：表示当前配置文件所在的目录（通常是项目的根目录）。
  • dist：指定输出目录为 dist 文件夹。打包后的文件将存放在这个目录下。
  • 作用：将所有输出文件统一放置到 dist 文件夹中。

03. libraryTarget: 'umd'

  • 含义：指定打包后的库的导出格式。

  • umd：Universal Module Definition（UMD）是一种兼容 CommonJS、AMD 和浏览器全局变量的模块定义方式。

  • 作用：使得打包后的代码可以在多种环境中使用，包括：

    • Node.js：CommonJS 规范。
    • 浏览器：全局变量或 AMD 规范。
    • 其他模块系统：如 ES 模块（ESM）。

  • 适用场景：如果你的项目是一个库（library），并且希望在不同环境中都能被引入，使用 umd 是非常合适的。

04. library: '[name]'

  • 含义：指定打包后的库的名称。
  • [name] ：同 filename 中的 [name]，表示根据入口对象的键名来动态生成库的名称。
  • 作用：打包后的库将以指定的名称暴露给外部环境。例如，如果 entry 中有 main 和 vendor，那么打包后的库名称将是 main 和 vendor。
  • 适用场景：如果你的项目是一个库，并且希望外部代码可以通过特定名称来引用，library 是必须配置的。

3.mode模式

mode 字段用于指定当前构建模式，通常有以下两种选择：

image.png

  1. development：开发模式，提供更详细的错误信息和警告，有助于调试，但构建速度较慢，生成的文件较大。
  2. production：生产模式，对代码进行最大程度的优化，包括压缩代码、移除无用代码等，以提高性能和减小文件大小，但错误信息相对较少。

4.externals

用于指定哪些模块不需要被打包到最终的输出文件中，而是通过外部方式（如 CDN、全局变量、其他模块系统等）引入。这样可以减小打包后的文件体积，并允许在运行时动态加载这些外部依赖。

image.png

01. vue
  • root: 'Vue' ：表示在浏览器环境中，vue 模块将通过全局变量 Vue 来访问。
  • commonjs: 'vue' ：表示在 CommonJS 环境中，vue 模块将通过 require('vue') 来访问。
  • commonjs2: 'vue' ：与 commonjs 类似，但适用于 CommonJS2 环境。
  • amd: 'vue' ：表示在 AMD 环境中，vue 模块将通过 define(['vue'], ...) 来访问。
02. vuex
  • vuex: 'Vuex' ：表示在浏览器环境中，vuex 模块将通过全局变量 Vuex 来访问。
03. ElementUI
  • ElementUI: 'tree' ：表示在浏览器环境中，ElementUI 模块将通过全局变量 tree 来访问。

如果你正在开发一个库，并且希望用户能够通过他们自己的方式引入依赖（如通过 CDN 或 npm），那么可以使用 externals 来排除这些依赖。

5.loader（类似于转换器）

把js和json外的其它文件转为Webpack可以识别的模块

loader采用链式调用，即一个文件可经过多个loader处理，执行顺序是从右到左，或者从下到上。

image.png

6.Plugin（类似于扩展器）

Plugin可以在Webpack工作流程中插入操作，用以扩展Webpack功能。

Webpack暴露若干种钩子，表示Webpack工作的不同阶段。Plugin可以通过注册钩子插入Webpack工作流程。

调用插件采用require形式，然后在plugins里，以new构建实例的方式使用。

image.png

image.png

7.performance

用于控制webpack在资源的大小超过限制的时候，做出提示。

image.png

  • hints：这个选项用于控制当生成的文件超过指定大小时，Webpack 应该显示什么类型的提示。可选值包括：

    • 'warning'：显示警告信息。
    • 'error'：显示错误信息，并阻止打包过程。
    • false：关闭性能提示。

  • maxEntrypointSize：指定入口起点文件的最大体积（以字节为单位）。例如，512000 字节等于 500 KB。

  • maxAssetSize：指定生成的资源文件的最大体积（以字节为单位）。例如，307200 字节等于 300 KB。

  • assetFilter：一个函数，用于过滤哪些文件应该受到性能提示的影响。在这个例子中，只有以 .js 结尾的文件才会被检查文件大小。

avatar
文章
阅读
粉丝