webpack配置全面讲解【完整篇】

已于 2024-09-27 14:00:00 修改
阅读量524 收藏 7
点赞数 9
分类专栏： 前端工程化 文章标签： webpack 前端 node.js 前端框架
于 2024-09-27 11:59:02 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cdns_1/article/details/142578123
版权

文章目录

前言

Webpack 是一个现代 JavaScript 应用程序的静态模块打包工具，它可以将项目中的所有模块（JavaScript、图片、CSS 等）打包成一个或多个 bundle。
Webpack 4 是一个重要的版本，它提供了零配置、合理的默认设置、性能改进和开箱即用的优化工具。本文将对 webpack 4 进行介绍，后面会对其他版本特性进行补充

webpack 核心包：

  1. webpack: 这是 Webpack 的核心包，提供了模块打包的能力。它能够处理项目中 JavaScript 模块的依赖关系，并生成最终的静态资源文件。

  2. webpack-cli: 这是 Webpack 的命令行工具，允许你通过命令行界面来运行 Webpack。它提供了各种命令来控制 Webpack 的构建过程。

  3. webpack-dev-server: 这是一个小型的 Express 开发服务器，用于开发环境。它提供了热模块替换（HMR）功能，允许在开发过程中实时重新加载模块，而无需刷新整个页面。

配置文件导出三种方式：

默认使用的是 webpack.config.js 文件，也可以是其他名字，webpack -c xxx，只需要通过-c置顶文件就行，配置文件默认有是三种导出格式：

  • 对象或数组：单个配置或多个配置
  • 函数： 可以根据环境变量和条件导出不同的配置
  • Promise：用于远程加载其他配置参数，最终返回结果

代码实例：

// 对象或数组
module.exports = [
  {
    output: {
      filename: "./dist.js",
    },
    entry: "./app.js",
  },
  {
    output: {
      filename: "./dist-test.js",
    },
    entry: "./app.js",
  },
];
// 函数
module.exports = function (env, argv) {
  return {
    mode: env.production ? "production" : "development",
    devtool: env.production ? "source-map" : "eval",
    plugins: [
      new TerserPlugin({
        terserOptions: {
          compress: argv.mode === "production", // only if `--mode production` was passed
        },
      }),
    ],
  };
};
// promise
module.exports = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve({
        entry: "./app.js",
        /* ... */
      });
    }, 5000);
  });
};

在线配置 webpack

配置文件解析：

入口（Entry）：

  • 入口点是应用程序的起点，Webpack 从这些点开始构建其依赖图。入口可以是一个文件或者一个文件数组。
// 单入口
entry: {
   main:'./index.js',
}
// 多入口
entry: {
   main: './src/app.js',
   foo: './src/foo.js',
},

输出（Output）：

  • 输出属性指定了打包后的文件将如何被写入到磁盘上。它定义了输出文件的名称、路径以及它们在浏览器中被引用的方式。
output: {
    filename: '[name].js', //hash选择：[hash]，[contenthash] 或者 [chunkhash] 的长度可以使用 [hash:16]
    path: __dirname + '/dist', //输出目录
    publicPath: 'https://cdn.example.com/assets/[fullhash]/' // 设置cdn 和 hash
  },

加载器（Loaders）：

  • Webpack 只能理解 JavaScript，Loaders 允许 Webpack 处理其他类型的文件，并将它们转换为 Webpack 能够理解的模块【模块转化】。
  • loader 可以使你在 import 模块时预处理文件。因此，loader 类似于其他构建工具中“任务(task)”，并提供了处理前端构建步骤的得力方式
  • loader 支持配置和内联的方式书写
  • loader 执行顺序： 从右到左（或从下到上）的执行(execute)
 module: {
    rules: [
      {
        test: /\.css$/,
        exclude: /node_modules/,
        use: [
          { loader: 'style-loader' },
          {
            loader: 'css-loader',
            options: {
              modules: true,  // css模块化
            },
          },
          { loader: 'sass-loader' },
        ],
      },
    ],
  }

插件（Plugins）：

  • 插件在 Webpack 构建过程中提供了更多的功能，如优化、压缩、分割代码等。插件可以在整个构建过程中的特定时机注入上下文。
  • Webpack 内部广泛使用 Tapable （一个 Node.js 库），它提供了一个发布-订阅（pub-sub）机制，允许用户在特定的钩子（hook）上注册监听器（listener）。
const HtmlWebpackPlugin = require("html-webpack-plugin");
const webpack = require("webpack"); // 访问内置的插件

plugins: [
  new webpack.ProgressPlugin(),
  new HtmlWebpackPlugin({ template: "./src/index.html" }),
];

模式（Mode）：

  • 模式决定了 Webpack 是为开发环境还是生产环境构建应用程序。它可以是 development、production 或 none。模式影响 Webpack 的优化和警告。
  // 模式
  mode: 'production', //development

目标（Target）：

用于告知 Webpack 为哪个环境或目标（target）进行构建编译 , 默认情况下，target 的值是 "web"

  // 模式
  target: 'web', //node、webworker 。。。。

webpack 的 runtime 和 manifest

  • manifest 包含文件一般包含 ，如模块及模块依赖、每个模块的源码映射、异步加载的模块，等。
  • runtime 会通过 manifest 来解析和加载模块。

服务器

配置开发服务器，包括代理、热模块替换等

  devServer: {
  // 设置开发服务器监听的主机地址
  // '0.0.0.0' 表示服务器将接受所有可用网络接口的请求
  host: '0.0.0.0',
  // 设置开发服务器监听的端口号
  port: 3000,
  // 设置为 true 时，当 webpack 编译完成后，会自动在浏览器中打开应用
  open: true,
  // 启用模块热替换(HMR)，允许在不刷新整个页面的情况下，实时更新模块
  hot: true,
  // 为单页应用(SPA)提供支持，当访问不存在的路由时，会返回 index.html
  historyApiFallback: true,
  // 开启 gzip 压缩，提高传输效率
  compress: true,
  // 指定了 public 目录下的文件作为静态资源
  // 当你访问如 /js/index.js 这样的路径时，devServer 会从 public 目录提供文件
  static: {
    directory: path.join(__dirname, 'public')
  },

  // 配置代理，用于开发环境的后端接口代理
  proxy: {
    // 当请求前缀为 /api 时，触发代理
    '/api': {
      // 代理目标服务器的地址
      target: 'http://backend.server.com',
      // 配置是否改变请求头中的origin字段
      changeOrigin: true,
      // URL 重写，这里将请求中的 /api 替换为空字符串   例如，将 /api/user 重写为 /user
      pathRewrite: { '^/api': '' },
    },
  },
},

模块解析配置


resolve: {
    alias: { //创建 import 或 require 的别名
      @: path.resolve(__dirname, 'src/'),
      _: path.resolve(__dirname, 'src/utils/'),
    },

    extensions: ['.js', '.jsx', '.ts','.tsx'], //尝试按顺序解析这些后缀名
    modules: [path.resolve(__dirname, 'src'), 'node_modules'], //告诉 webpack 解析模块时应该搜索的目录。
  },

优化配置

配置代码压缩、优化分割代码块。

  // 优化
 optimization: {
  minimize:true, // 开启优化
  // minimizer 属性用于配置压缩工具，用于压缩 JavaScript 和 CSS 文件
  minimizer: [
    // TerserPlugin 是一个插件，用于压缩 JavaScript 文件
    new TerserPlugin({
      // terserOptions 用于传递给 Terser 的选项
      terserOptions: {
        // compress 属性用于配置压缩选项
        compress: {
          // drop_console 选项设置为 true，将删除所有的 console 语句
          drop_console: true
        }
      },
      // extractComments 选项设置为 false，以防止插件提取注释到单独文件
      extractComments: false
    }),
    // OptimizeCSSAssetsPlugin 用于压缩 CSS 文件
    new OptimizeCSSAssetsPlugin({})
  ],

  // splitChunks 属性用于配置代码分割选项
  splitChunks: {
    // chunks 属性用于指定应该分割哪些 chunks，'all' 表示所有 chunks
    chunks: 'all',
    // minSize 属性定义了分割出的 chunk 的最小大小，这里是 20000 字节
    minSize: 20000,
    // minRemainingSize 属性定义了分割后剩余模块的最小大小，这里设置为 0
    minRemainingSize: 0,
    // minChunks 属性定义了模块应该被分割的最小 chunk 数量，这里是 1
    minChunks: 1,
    // maxAsyncRequests 属性定义了按需加载时的最大并行请求数，这里是 5
    maxAsyncRequests: 5,
    // maxInitialRequests 属性定义了初始加载时的最大并行请求数，这里是 3
    maxInitialRequests: 3,
    // automaticNameDelimiter 属性定义了自动生成的 chunk 名称之间的分隔符
    automaticNameDelimiter: '~',
    // automaticNameMaxLength 属性定义了自动生成的 chunk 名称的最大长度，这里是 30
    automaticNameMaxLength: 30,
    // cacheGroups 属性用于配置缓存组，用于更细致地控制代码分割
    cacheGroups: {
      // defaultVendors 缓存组用于处理来自 node_modules 的第三方库
      defaultVendors: {
        // test 属性用于定义哪些模块应该被包含在这个缓存组
        test: /[\\/]node_modules[\\/]/,
        // priority 属性定义了这个缓存组的优先级，-10 表示较低优先级
        priority: -10,
        // reuseExistingChunk 选项设置为 true，表示尽可能重用现有的 chunk
        reuseExistingChunk: true
      },
      // default 缓存组用于处理应用程序代码
      default: {
        // minChunks 属性定义了模块应该被分割的最小 chunk 数量，这里是 2
        minChunks: 2,
        // priority 属性定义了这个缓存组的优先级，-20 表示较低优先级
        priority: -20,
        // reuseExistingChunk 选项设置为 true，表示尽可能重用现有的 chunk
        reuseExistingChunk: true
      }
    }
  }
},

热模块替换（Hot Module Replacement, HMR）：

  • HMR 是一种功能，允许在应用程序运行时替换、添加或删除模块，而无需重新加载整个页面。
  • 原理：
    1. 浏览器和服务器建立socket 通道
    2. 修改代码后，webpack compiler 发出update事件，
    3. hmr 请求 manifest和chunk，根据页面内容配置，更新模块
// webpack.config.js

devServer：{
  hot：true
}

plugins: [
  new webpack.HotModuleReplacementPlugin()
]


// component.js
 function component() {
    const element = document.createElement('input');
    element.value = 123;
    return element;
  }

  let element = component();
  document.body.appendChild(element);

  if (module.hot) {
    module.hot.accept('./print.js', function() {
      console.log('热更新进入！');
      const value = document.getElementsByTagName("input")[0].value.value;
      element = component(); // 重新渲染 component 以更新点击事件处理程序
      document.body.appendChild(element);
      // 回显数据
      document.getElementsByTagName("input")[0].value.value = value
    })
  }

代码分割（Code Splitting）：

- 代码分割是 Webpack 的一个特性，可以将代码分割成多个块，这些块可以按需加载或者并行加载，从而优化加载时间和性能。
- 代码拆分手段：import 动态导入、ensure方法、SplitChunksPlugin插件、多入口
  1. 动态导入（Dynamic Imports）

动态导入是实现代码分割最简单的方式之一。你可以使用 import() 函数来动态地加载模块。

// 1. 直接使用
if (someCondition) {
  import("./otherModule.js").then((otherModule) => {
    otherModule.doSomething();
  });
}

// 2. promise 返回
function loadModule(modulePath) {
  return new Promise((resolve, reject) => {
    import(modulePath).then(
      (module) => {
        resolve(module);
      },
      (err) => {
        reject(err);
      }
    );
  });
}

// 动态加载模块
loadModule("./otherModule.js")
  .then((module) => {
    module.doSomething();
  })
  .catch((err) => {
    console.error("模块加载失败", err);
  });

在 Webpack 配置中，你不需要做任何特别的配置来处理动态导入，因为 Webpack 已经自动支持了。

  1. 使用 require.ensure

require.ensure 是一个更老的代码分割方法，require.ensure() 是 webpack 特有的，已被 import() 取代。。

// 参数1:  dependencies 依赖数组
// 参数2： callback 回调函数
// 参数3:  errorCallback: 失败回调
// 参数4:  chunkName
// Webpack会创建一个名为 `feature` 的新chunk。
require.ensure(
  [],
  () => {
    const module = require("./module");
    module.someFunction();
  },
  "feature"
);
  1. SplitChunksPlugin

SplitChunksPlugin 是 Webpack 4+ 引入的一个插件，用于控制代码块的分割逻辑。以下是一个基本的配置示例：

const webpack = require("webpack");

module.exports = {
  // ...
  optimization: {
    splitChunks: {
      chunks: "all", // 代码分割的chunk类型，可选值有 'initial'、'async' 或 'all'
      minSize: 20000, // 最小chunk大小，默认单位是byte
      minChunks: 1, // 最小chunk数量，默认是1
      maxAsyncRequests: 5, // 按需加载时的最大并行请求数
      maxInitialRequests: 3, // 入口点的最大并行请求数
      automaticNameDelimiter: "~", // 分割出的chunk文件名的连接符
      cacheGroups: {
        defaultVendors: {
          test: /[\\/]node_modules[\\/]/,
          priority: -10,
          reuseExistingChunk: true,
        },
        default: {
          minChunks: 2,
          priority: -20,
          reuseExistingChunk: true,
        },
      },
    },
  },
  // ...
};
  1. 多入口拆分

如果你想要手动拆分第三方库，可以在 entry 属性中指定：

entry: {
  bundle: './src/index.js',
  vendor: ['react', 'react-dom'] // 将React和ReactDOM拆分出去
},

output: {
  filename: '[name].js' // 根据entry的key来命名
},

optimization: {
  splitChunks: {
    cacheGroups: {
      vendor: {
        test: /[\\/]node_modules[\\/]/,
        name: 'vendor',
        chunks: 'all'
      },
    },
  },
},

  1. 摇树优化（Tree Shaking）：

    • 摇树优化是一种去除应用程序中未引用代码的技术，通常与 ES6 模块一起使用。

  2. 懒加载（Lazy Loading）：

    • 懒加载是一种按需加载模块的技术，可以减少初始加载时间。

  3. 配置（Configuration）：

    • Webpack 的配置是通过一个名为 webpack.config.js 的文件来进行的，它定义了入口、输出、加载器、插件等。

  4. 解析（Resolving）：

    • 解析是 Webpack 确定如何处理文件的过程，包括如何找到文件、如何解析文件中的模块请求等。

  5. 缓存（Caching）：

    • Webpack 通过缓存来提高构建性能，它会跳过未发生变化的模块，避免不必要的重新构建。

  6. 记录（Profiling）：

    • Webpack 可以生成构建的记录，帮助开发者分析和优化构建过程。

  7. 持久化（Persistence）：

    • Webpack 4 引入了持久化缓存，即使在构建之间也可以保持缓存状态。

在 Node 中使用 webpack

const webpack = require("webpack"); // 访问 webpack 运行时(runtime)
const configuration = require("./webpack.config.js");

let compiler = webpack(configuration); //传入配置

new webpack.ProgressPlugin().apply(compiler);

compiler.run(function (err, stats) {
  if (err) {
    console.log("编译出错");
  }
});
子羽bro
关注
专栏目录
webpack配置全面讲解
qq_43604182的博客
01-11 263
webpack 文章目录webpack1、webpack 是什么？2、安装3、使用4、打包模块4-1、入口文件4-2、打包命令5、打包配置6、核心配置6-1、mode6-2、entry6-3、output7、深入7-1、执行简要流程8、Loaders8-1、raw-loader8-2、file-loader8-3、url-loader8-4、css-loader8-5、style-loader9、Plugins9-2、HtmlWebpackPlugin9-3、clean-webpack-plugin9-4、
webpack5.0基础配置（全面）
weixin_40756663的博客
03-01 4524
前言 朋友们好我是跑不快的猪，新的一年，新的开始，先预祝各位都有华丽丽的变身。 本篇文章主要进行webpack5.0+版本的配置，在这个脚手架横行的时代，最终还是需要掌握一些基础的配置，对工作、面试、以及各脚手架中webpack的调试都有不小的作用。接下来会一步步的分享我学习配置中的一些坑和心得，需要代码的朋友请直接滑到页面底部。 概念预热 在学习webpack的过程中，有如下几个概念贯穿始终，在开始之前先列出来。掌握了它们虽然不至于事半功倍，但是对一些配置的理解可能会更简单一点。 module（模块）
webpack配置详解
weixin_42809461的博客
01-31 306
本文拟通过一篇完整的配置文档做为例子，讲解webpack配置的全过程。帮助webpack小白快手搭建工程，同时也帮助大家全面理解webpack配置。 话不多说，上代码！????‍???? module.exports={ mode:'development', //打包模式，三种 none|development|production，默认为production ----------说明① entry:"src/index.js", //一个入口文件 /* e
Webpack 基础配置介绍（二）
享白
09-12 323
今天继续分享webpack的有关内容！ 今日分享： webpack的规范配置，webpack.config.js基础配置、单页开发【单文件打包】、多页开发【多文件打包】、glob配置动态入口打包多文件、哈希Hash、以及一些常用命令。 文章目录： 一、前言： 提到 webpack 的配置方案、插件等，相信很多小伙伴都有了解，网上也有很多关于webpack的配置说明，但都是参差不齐。博主会陆续带大家对它进行全面剖析！ 1、webpack的基础配置： webpack的配置分为三...
vue-cli webpack配置分析 - chenBright - SegmentFault 思否(1)
2401_84092574的博客
04-20 792
外链图片转存中…(img-TYmOZYIg-1713568523463)][外链图片转存中…(img-HsPmcwBs-1713568523464)]
webpack配置-相关属性说明
SunnyRun
07-10 1610
前言：webpack是我们现代前端最常见的模块打包工具，webpack 是一个模块打包器，主要目的是在浏览器上打包 JavaScript 文件。特性：打包 CommonJs 和 AMD 模块（以及绑定），可创建单个或多个按需加载的块，以减少初始加载时间，在编译期间会解决依赖关系，减少了运行时的大小，加载器可以在编译时预处理文件，如 coffee-script 到 javascript。 小编也是从闲余时间零开始搭建webpack，作为演示讲解一些常用的功能块和属性方法 1. 代码示例 webpack.b.
Webpack的基本使用
2401_84091580的博客
04-20 634
本人分享一下这次字节跳动、美团、头条等大厂的面试真题涉及到的知识点，以及我个人的学习方法、学习路线等，当然也整理了一些学习文档资料出来是附赠给大家的。知识点涉及比较全面，包括但不限于前端基础，HTML，CSS，JavaScript，Vue，ES6，HTTP，浏览器，算法等等详细大厂面试题答案、学习笔记、学习视频等资料领取，点击资料领取直通车免费领取！较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！**
webpack - webpack的基本使用和总结
qq_43886365的博客
03-02 960
webpack 运行在node环境上的一个包；webpack 可以把前端的任何资源, 当做模块, 来进行打包整合, 也可以支持不同的代码(ES6模块代码, CSS文件, LESS文件, 图片....) 编写前端代码后, 可以被webpack打包整合, 运行在浏览器上
从零配置webpack-vue项目(1)
2401_84091321的博客
04-21 913
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。
webpack视频学习
08-28
讲解会涵盖如何安装Webpack，以及创建基本的配置文件，包括设置入口起点(entry point)和输出路径(output path)。此外，还将介绍使用npm脚本来执行Webpack构建的过程。 02. 尚硅谷_自动化构建工具webpack_打包js, ...
webpack-tutorial-collection：webpack教程资源收集
02-06
- **Vue-Webpack**：Vue.js 提供官方的 Vue CLI，内置了Webpack配置，简化了Vue项目搭建。Vue单文件组件（SFCs）可以被Webpack识别并处理。 - **React-Webpack**：React应用也需要Webpack来处理JSX语法和模块，通常...
RequireJS全面讲解.docx
06-10
RequireJS为这些项目提供了模块化的解决方案，同时也能与构建工具结合，如Webpack或Rollup，用于优化生产环境的代码打包。 总的来说，RequireJS是JavaScript开发中模块化和异步加载的重要工具，通过它，开发者可以...
webpack与vite读取base64图片
owo_ovo的博客
09-23 618
webpack与vite处理base64图片
【Webpack】优化前端开发环境的热更新效率
小秀的博客
09-25 1103
确保 Webpack 只监听需要的文件和目录，可以通过配置的ignore来忽略一些变化频率高且不需要监听的文件，如。添加resolve中的alias和extensions，减少 Webpack 在解析模块时的搜索范围，可以显著加快打包速度。使用如或等工具，搭配或vue-loader等插件，可以实现更高效的热更新。可以利用 Webpack 的cache功能，避免每次重新构建都需要从头开始，极大提高构建速度。在开发环境中尽量少用或不用代码压缩、文件优化等耗时操作，保留这些优化仅在生产环境中执行。
【Webpack】使用 Webpack 和 LocalStorage 实现静态资源的离线缓存
小秀的博客
09-24 415
【代码】【Webpack】使用 Webpack 和 LocalStorage 实现静态资源的离线缓存。
Qt | linux+openCV+Qt6.5.3环境搭建成功版（带例子）
m0_45463480的博客
09-19 1256
opencv安装 Qt 实战举例
【Webpack--012】提取单独的CSS文件&压缩CSS文件
m0_61486963的博客
09-20 929
提取单独的CSS文件和压缩CSS文件
vue打包后的dist文件如何启动测试
最新发布
qq_44182424的博客
09-26 299
vue项目进行webpack打包操作后，会生成dist静态文件夹，这个文件是不能直接运行的，如果我们想要进行测试的话，一般是有两种方式。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

子羽bro

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值