webpack入门一篇

1、webpack生命周期

Webpack 构建过程是生命周期的概念，主要包括以下几个阶段：

1.1：初始化

从配置文件和shell arguments读取参数，初始化Compiler对象。

根据配置文件中的entry，确定构建的入口文件。

1.2：配置

解析配置文件，合并shell arguments和plugin定义的默认配置，得到最终配置。

1.3：编译

从入口文件开始，调用对应的 loader 进行处理；递归地解析入口文件中依赖的模块，同样应用相应的 loader。

使用得到的配置信息，创建Compiler对象，进入编译阶段。

1.4：构建

从入口点开始，经过语法分析、依赖解析、打包、最小化、压缩等步骤生成bundles。

1.5：输出

输出bundles到output配置指定的目录/文件名称，还可以输出其他资源比如html文件。

1.6：结束

执行所有的插件的compiler.hooks.done事件回调。

2、webpack核心概念

2.1：entry

单入口（单页应用）

module.exports = {
    entry: 'entry-path'
}

// 等价于
module.exports = {
    entry: {
        main: 'entry-path'
    }
}

// 如果是多文件入口，并且将多文件打包到一起
module.exports = {
    entry: ['entry-file1-path', 'entry-file2-path']
}

多入口（多页应用）

对于多入口，配置的入口key名对应输出output配置多输出的filename中[name]占位符，一一对应

module.exports = {
    entry: {
        app1: 'app1-entry-path',
        app2: 'app2-entry-path',
    }
}

// 可以对入口进行单独的配置

// 用于描述入口的对象。你可以使用如下属性：

// dependOn: 当前入口所依赖的入口。它们必须在该入口被加载前被加载。

// filename: 指定要输出的文件名称。

// import: 启动时需加载的模块。

// library: 指定 library 选项，为当前 entry 构建一个 library。

// runtime: 运行时 chunk 的名字。如果设置了，就会创建一个新的运行时 chunk。在 webpack 5.43.0 之后可将其设为 false 以避免一个新的运行时 chunk。

// publicPath: 当该入口的输出文件在浏览器中被引用时，为它们指定一个公共 URL 地址。请查看 output.publicPath。
module.exports = {
    entry: {
        app1: {
            import: 'app1-entry-path',
            filename: 'mainapp'
        },
        app2: {
            import: 'app2-entry-path',
            dependOn: 'app1'
        },
    }
}

2.2：plugin

插件配置用于文件优化、资源管理、环境变量注入等，贯穿整个构建过程；完成loader不能完成的任务

module.exports = {
    plugin: [
        // 创建plugin实例
        new Plugin(),
        ...
    ]
}

2.3：loader

loader 用于对模块的源代码进行转换。loader 可以使你在 import 或 "load(加载)" 模块时预处理文件。loader 可以将文件从不同的语言（如 TypeScript）转换为 JavaScript 或将内联图像转换为 data URL。

配置参数 test正则匹配文件，use使用的loader以及对应的配置，options为对loader的配置

// 需要注意的是 loader的执行顺序是至下而上的，配置在后面的先执行
// 下例子中 sassloader\cssloader\styleloader的顺序执行
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          { loader: 'style-loader' },
          {
            loader: 'css-loader',
            options: {
              modules: true,
            },
          },
          { loader: 'sass-loader' },
        ],
      },
    ],
  },
};

2.4：output

output 属性告诉 webpack 在哪里输出它所创建的 bundle，以及如何命名这些文件。主要输出文件的默认值是 ./dist/main.js，其他生成文件默认放置在 ./dist 文件夹中。

// path 输出文件夹位置
// filename 输出文件名称
module.exports = {
    path: path.resolve(__dirname, 'dist'),
    filename: 'my-first-webpack.bundle.js',
}


// 如果是多文件入口，并且将多文件打包到一起 name与entry多入口名称一致
module.exports = {
    output: {
        filename: '[name].js'
    }
}

输出中filename配置的[name]模板字符串还可以有其他配置，参考Output | webpack 中文文档 | webpack中文文档 | webpack中文网