Webpack 是一个强大的前端打包工具，它可以将多个文件打包成一个或多个文件，以减少 HTTP 请求的数量。在 Webpack4 中，mode 为 production 时，Webpack 会自动开启一些优化功能，如代码压缩和 tree shaking。但有时候我们需要排除某些文件不被打包，以减小打包后文件的体积，提高加载速度。本篇文章将介绍在 Webpack4 中如何排除某些文件不被打包。
为什么需要排除某些文件不被打包
在开发过程中，我们通常会使用一些第三方库或插件，这些库或插件可能已经被打包过了，如果我们不排除它们，它们就会被重复打包，导致打包后的文件体积变大，加载速度变慢。此外，有些文件可能不需要被打包，例如图片、字体等静态资源，这些文件可以通过其他方式加载，如 CDN 或 base64。
如何排除某些文件不被打包
Webpack 提供了两种方式来排除某些文件不被打包：exclude 和 externals。
exclude
exclude 可以排除某些文件或文件夹不被打包。在 Webpack 配置文件中，我们可以使用 exclude 属性来指定要排除的文件或文件夹。例如：
-- -------------------- ---- ------- -------------- - - ------ ----------------- ------- - --------- ----------- -- ------- - ------ - - ----- -------- -------- --------------- ---- - ------- -------------- - - - - -展开代码
在上面的例子中，exclude 属性指定了要排除的 node_modules 文件夹，这样在打包时就不会将 node_modules 中的文件打包到 bundle.js 中。
externals
externals 可以将某些文件作为外部依赖，不被打包到 bundle 中。在 Webpack 配置文件中，我们可以使用 externals 属性来指定要排除的文件或文件夹。例如：
-- -------------------- ---- ------- -------------- - - ------ ----------------- ------- - --------- ----------- -- ---------- - ------- -------- - -展开代码
在上面的例子中，externals 属性指定了要排除的 jquery 文件，这样在打包时就不会将 jquery 打包到 bundle.js 中。在使用时，我们需要在 HTML 文件中手动引入 jquery。
示例代码
下面是一个完整的 Webpack4 配置文件，演示如何排除某些文件不被打包：
-- -------------------- ---- ------- ----- ---- - ---------------- ----- ----------------- - ------------------------------- -------------- - - ----- ------------- ------ ----------------- ------- - --------- ------------ ----- ----------------------- ------- -- ------- - ------ - - ----- -------- -------- --------------- ---- - ------- -------------- - -- - ----- ----------------------- -------- --------------- ---- - ------- -------------- -------- - ----- --------------- ----------- --------- - - -- - ----- ------------------------------ -------- --------------- ---- - ------- -------------- -------- - ----- --------------- ----------- -------- - - - - -- ---------- - ------- -------- -- -------- - --- ------------------- --------- ------------------ -- - --展开代码
在上面的配置文件中，我们排除了 node_modules 文件夹、图片和字体文件不被打包，同时将 jquery 作为外部依赖。最后，使用 HtmlWebpackPlugin 插件生成 HTML 文件。
总结
在 Webpack4 中，排除某些文件不被打包可以使用 exclude 和 externals 两种方式。exclude 可以排除某些文件或文件夹不被打包，externals 可以将某些文件作为外部依赖，不被打包到 bundle 中。合理使用这两种方式可以减小打包后文件的体积，提高加载速度。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65c42399add4f0e0ffe92865
