webpack基础指南-入门

37叁柒
9 阅读5分钟

概念

本质上,webpack 是一个用于现代 JavaScript 应用程序的静态模块打包工具。当 webpack 处理应用程序时,它会从入口文件开始,递归地解析所有依赖的模块,并将它们打包成一个或多个 bundles.

webpack 的核心概念

  • 入口(entry)
    • 入口文件是 webpack 开始构建依赖图的起点。它可以是单个文件,也可以是多个文件(在多页面应用中)。
  • 输出(output)
    • 输出配置指定了 webpack 打包后的文件输出路径和文件名。
  • loader
    • loader 用于对模块的源代码进行转换。webpack 只能理解 JavaScript 和 JSON 文件,而 loader 可以将其他类型的文件(如 CSS,图片等)转换为模块,使 webpack 能够处理它们。
  • 插件(plugins)
    • 插件用于在 webpack 构建过程中执行自定义任务。它们可以用于优化,压缩,代码分割等。
  • 模式(mode)
    • 模式用于指定 webpack 运行的模式,包括 development 和 production。不同的模式会启用不同的优化配置。
  • 浏览器兼容性(browser compatibility)
  • 环境(enviroment)
    • 环境变量用于在 webpack 配置中根据不同的环境(如开发,生产)设置不同的行为。

基础指南

首先创建进入一个目录并初始化 npm，然后 在本地安装 webpack，接着安装 webpack-cli（此工具用于在命令行中运行 webpack）：

mkdir webpack-demo
cd webpack-demo
npm init -y
npm install webpack webpack-cli --save-dev

在项目根目录下创建一个 src 目录,并在其中创建一个 index.js 文件。这将是我们的入口文件。

webpack 在不配置的情况下是可以直接使用的 默认值为

  • 入口(entry): ./src/index.js
  • 输出(output): ./dist/main.js
  • 模式(mode): production
  • 插件(plugins): 无
  • 加载器(loader):无 只支持 js/json
  • Context（上下文） 启动 Webpack 命令所在的当前目录（即 process.cwd()） 含义: 入口路径（./src/index.js）就是基于这个目录去解析的。如果你在子文件夹里运行命令，可能会导致找不到入口文件。
  • Resolve（解析）默认值: ['.wasm', '.mjs', '.js', '.json']

如果要想详细自定义配置,需要在目录中创建 webpack.config.js 文件。 例如,我们可以在 webpack.config.js 文件中配置入口文件为 ./src/index.js,输出文件为 ./dist/main.js。

module.exports = {
  entry: "./src/index.js",
  output: {
    path: __dirname + "/dist",
    filename: "main.js",
  },
};

配置详情

入口(entry)

入口起点指示 webpack 应该从哪个文件开始构建依赖图,默认值为./src/index.js,进入入口文件后,webpack 会找出哪些模块和库是与入口文件直接或间接依赖的,并将它们打包到一个或多个 bundle 中。 可以在 webpack 配置中指定多个入口起点,每个入口起点都将生成一个独立的 bundle。

单入口写法

webpack.config.js

module.exports = {
  entry: {
    main: "./path/to/my/entry/file.js",
  },
};

多入口写法

module.exports = {
  entry: {
    main: "./path/to/my/entry/file.js",
    admin: "./path/to/my/admin/entry/file.js",
  },
};

输出(output)

output 属性告诉 webpack 打包后的文件输出路径和文件名。默认值为./dist/main.js。其他入口的文件会默认输出到./dist目录下。 可以通过在配置中指定 output.path 来改变输出路径。例如： webpack.config.js

const path = require("path");
module.exports = {
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "main.js",
  },
};

loader(加载器)

webpack 默认只能理解 JavaScript 和 JSON 文件,而 loader 可以将其他类型的文件(如 CSS,图片等)转换为模块,使 webpack 能够处理它们。 loader 实际上就是一个函数,它接收源文件作为参数,并返回转换后的结果。

在 webpack 配置中,通过 module.rules 数组来定义 loader。

  1. test 属性，使用正则来匹配识别出哪些文件会被转换。
  2. use 属性，定义出在进行转换时，应该使用哪个 loader。

例如，要将所有 .css 文件转换为模块,可以使用以下配置： webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
    ],
  },
};

这里的 test 属性使用了正则表达式 /.css$/ 来匹配所有以 .css 结尾的文件。use 属性指定了要使用的 loader,这里使用了 style-loader 和 css-loader 来处理 CSS 文件。

当 webpack 处理到一个 CSS 文件时,会先使用 css-loader 来解析文件中的 @import 和 url() 等引用,并将它们转换为模块。然后,使用 style-loader 将这些模块插入到 HTML 文件的 <head标签中。

loader 会按照数组中的顺序从右向左执行。

插件(plugins)

loader 用于对模块的源代码进行转换。 而插件用于在 webpack 构建过程中执行自定义任务。 比如打包优化,资源管理,注入环境变量

想要使用一个插件,需要先安装它,然后在 webpack 配置中引入它。

例如,要使用 html-webpack-plugin 插件来自动生成 HTML 文件,可以先安装它：

npm install html-webpack-plugin --save-dev

然后在 webpack 配置中引入它： webpack.config.js

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  entry: {
    index: "./src/index.js",
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: "管理输出",
    }),
  ],
  output: {
    filename: "[name].bundle.js",
    path: path.resolve(__dirname, "dist"),
  },
};

这样会在 dist 目录下生成一个 index.html 文件,并自动引入 index.bundle.js。

模式(mode)

通过选择 development, production 或 none 之中的一个，来设置 mode 参数，你可以启用 webpack 内置在相应环境下的优化。其默认值为 production。

module.exports = {
  mode: "development",
};

浏览器兼容性(browser compatibility)

Webpack 支持所有符合 ES5 标准 的浏览器（不支持 IE8 及以下版本）。webpack 的 import() 和 require.ensure() 需要 Promise。如果你想要支持旧版本浏览器，在使用这些表达式之前，还需要 提前加载 polyfill。

环境(environment)

Webpack 5 运行于 Node.js v10.13.0+ 的版本。

avatar
文章
阅读
粉丝