构建webpack知识体系 | 青训营

evosoon
61 阅读2分钟

Webpack是一个现代化的前端构建工具，它会分析你的项目结构，找到JavaScript模块以及其他的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其打包为合适的格式以供浏览器使用。

基础概念

入口（Entry）： 指定 Webpack 从哪个文件开始构建依赖图。一个项目可以有多个入口，Webpack 会分析入口文件及其依赖。

出口（Output）： 指定 Webpack 打包后的输出目录和文件名。通常是一个或多个最终生成的 JavaScript 文件。

加载器（Loaders）： 用于转换非 JavaScript 文件，比如将 ES6 转换成 ES5，或将 Sass 转换成 CSS。

插件（Plugins）： 用于执行范围更广的任务，比如优化资源、注入环境变量、生成 HTML 文件等。

模式（Mode）： 通过设置不同的模式，可以开启 Webpack 的内置优化。可选值有 development、production、none。

核心概念

  1. 模块(module)：Webpack将所有的文件都视为模块。每个模块都有自己的依赖关系，Webpack通过分析这些依赖关系来构建整个项目。
  2. 依赖图(dependency graph)：Webpack通过分析模块之间的依赖关系，生成一个依赖图。这个图可以帮助Webpack确定模块的加载顺序。
  3. Chunk：Webpack将代码分割成多个块，每个块都是一个独立的文件。这样可以实现按需加载，提高页面加载速度。
  4. 资源(resource)：Webpack可以处理各种类型的资源，例如JavaScript、CSS、图片、字体等。

常用配置

  1. entry配置：通过entry配置指定入口文件。可以是一个字符串、一个数组或一个对象。
module.exports = { entry: './src/index.js' };
  1. output配置：通过output配置指定输出文件的路径和名称。
module.exports = {
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  }
};
  1. loaders配置：通过loaders配置指定加载器，用于处理非JavaScript文件。
module.exports = {
  module: {
    rules: [
      {
        test: /.css$/,
        use: ['style-loader', 'css-loader']
      }
    ]
  }
};
  1. plugins配置：通过plugins配置指定插件，用于执行各种任务。
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    })
  ]
};

核心流程

  1. 入口处理：从entry文件开始，启动编译流程
  2. 依赖解析：从entry文件开始，根据requireorimport等语句找到依赖资源
  3. 资源解析：根据module配置，调用资源转移器，将png、css等非标准JS资源转译为JS内容
  4. 资源合并打包：将转译后的资源内容合并打包为可直接在浏览器运行的JS文件

总结

webpack还是很复杂的，需要后续的深入了解

avatar
文章
阅读
粉丝