Webpack 从入门到精通

Webpack 是一个现代 JavaScript 应用程序的静态模块打包器（module bundler）。它会根据模块的依赖关系，递归地构建一个依赖图（dependency graph），然后将这些模块打包成一个或多个 bundle。

Webpack 的主要目标是将 JavaScript 文件打包在一起用于在浏览器中使用，但它也能够通过 loader 的机制来打包其他资源，如 CSS、图片和 HTML。

二、Webpack 的核心概念

入口（Entry）：Webpack 应该使用哪个模块作为构建其内部依赖图的开始。换句话说，入口起点指示 webpack 应该使用哪个模块作为构建其内部依赖图的开始。进入入口起点后，webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的。
输出（Output）：告诉 Webpack 在哪里输出它所创建的 bundles，以及如何命名这些文件，默认值为 ./dist。基本上，整个应用程序结构，都会被编译到你指定的输出路径的文件夹中。你可以通过在配置中指定一个 output 字段，来配置这些处理过程。
加载器（Loaders）：让 Webpack 能够去处理那些非 JavaScript 文件（Webpack 自身只理解 JavaScript）。加载器可以将所有类型的文件转换为 Webpack 能够处理的有效模块，然后你就可以利用 Webpack 的打包能力，对它们进行处理。
插件（Plugins）：可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直到重新定义环境变量。插件接口功能极其强大，可以用来处理各种各样的任务。
模式（Mode）：通过设置 mode 参数为 'development' 或 'production'，你可以启用相应模式下的 Webpack 内置的优化。

三、Webpack 的安装与配置

安装 Node.js

Webpack 是运行在 Node.js 之上的，因此首先需要安装 Node.js。你可以从 Node.js 官网下载并安装。

安装 Webpack

打开终端或命令提示符，运行以下命令全局安装 Webpack 和 Webpack CLI：

复制代码

npm install -g webpack webpack-cli

初始化项目

创建一个新的目录作为项目文件夹，并初始化 npm：

复制代码

mkdir my-webpack-project  
cd my-webpack-project  
npm init -y

安装项目依赖的 Webpack

在项目文件夹中，安装 Webpack 作为项目的开发依赖：

复制代码

npm install --save-dev webpack webpack-cli

创建项目文件

在项目文件夹中，创建以下文件：

src/index.js：入口文件。

dist/index.html：用于测试打包后的 JavaScript 文件。

配置 Webpack

在项目根目录下创建一个名为 webpack.config.js 的文件，这是 Webpack 的配置文件。以下是一个基本的配置示例：

javascript 复制代码

const path = require('path');  
  
module.exports = {  
  mode: 'development', // 开发模式  
  entry: './src/index.js', // 入口文件  
  output: { // 输出配置  
    filename: 'bundle.js', // 输出文件名  
    path: path.resolve(__dirname, 'dist'), // 输出路径  
  },  
};

修改 `package.json`

在 package.json 文件的 scripts 部分添加一个构建脚本：

javascript 复制代码

"scripts": {  
  "build": "webpack"  
},

构建项目

在终端或命令提示符中运行以下命令来构建项目：

javascript 复制代码

npm run build

构建成功后，dist 目录下会生成 bundle.js 文件。你可以在 dist/index.html 文件中引入这个脚本来测试。

四、加载器（Loaders）的使用

Webpack 通过使用加载器（loaders）来提供一种机制来预处理文件。这允许你打包除 JavaScript 以外的任何静态资源。

使用 CSS 加载器

为了能够让 Webpack 处理 CSS 文件，你需要使用 css-loader 和 style-loader。css-loader 会遍历 CSS 文件，然后找到 url() 表达式然后处理他们，style-loader 会把原来的 CSS 代码插入页面中的一个 <style> 标签中。
安装 CSS 加载器：

javascript 复制代码

npm install --save-dev css-loader style-loader

配置 Webpack 以使用 CSS 加载器：

javascript 复制代码

const path = require('path');  
  
module.exports = {  
  // ...  
  module: {  
    rules: [  
      {  
        test: /\.css$/, // 正则表达式，匹配 CSS 文件  
        use: [  
          'style-loader', // 将 JS 字符串生成为 style 节点  
          'css-loader', // 将 CSS 转化成 CommonJS 模块  
        ],  
      },  
    ],  
  },  
};

现在你可以在 JavaScript 文件中导入 CSS 文件了，例如：

javascript 复制代码

import './style.css';

使用图片加载器

为了能够在 JavaScript 模块中导入图片，你需要使用 file-loader。
安装图片加载器：

javascript 复制代码

npm install --save-dev file-loader

配置 Webpack 以使用图片加载器：

javascript 复制代码

module.exports = {  
  // ...  
  module: {  
    rules: [  
      // ...  
      {  
        test: /\.(png|svg|jpg|jpeg|gif)$/i, // 正则表达式，匹配图片文件  
        use: [  
          'file-loader', // 将文件发送到输出文件夹，并返回（相对）URL  
        ],  
      },  
    ],  
  },  
};

现在你可以在 JavaScript 文件中导入图片文件了，例如：

javascript 复制代码

import imgSrc from './image.png';

五、插件（Plugins）的使用

Webpack 拥有丰富的插件系统，大多数内部功能都是基于这个插件系统构建的。这使得 Webpack 可以非常灵活地进行扩展。

使用 HtmlWebpackPlugin

HtmlWebpackPlugin 是一个非常有用的插件，它可以为你生成一个 HTML5 文件，其中包括使用 script 标签的 body 中的所有 webpack 包。这对于在文件名中包含每次会随着编译而发生变化哈希的 webpack bundle 尤其有用。
安装 HtmlWebpackPlugin：

javascript 复制代码

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

配置 Webpack 以使用 HtmlWebpackPlugin：

javascript 复制代码

const HtmlWebpackPlugin = require('html-webpack-plugin');  
const path = require('path');  
  
module.exports = {  
  // ...  
  plugins: [  
    new HtmlWebpackPlugin({  
      title: 'Webpack App', // 生成 HTML 文件的标题  
      template: './src/template.html', // 自定义模板文件路径  
    }),  
  ],  
};

现在当你运行 Webpack 构建时，它会生成一个包含你的 bundle 的 index.html 文件，并将其输出到 dist 目录下。

使用 CleanWebpackPlugin

CleanWebpackPlugin 用于在每次构建前清理（删除）dist 文件夹。
安装 CleanWebpackPlugin：

javascript 复制代码

npm install --save-dev clean-webpack-plugin

配置 Webpack 以使用 CleanWebpackPlugin：

html 复制代码

const { CleanWebpackPlugin } = require('clean-webpack-plugin');  
  
module.exports = {  
  // ...  
  plugins: [  
    // ...  
    new CleanWebpackPlugin(), // 添加 CleanWebpackPlugin  
  ],  
};

六、开发服务器（DevServer）

Webpack 提供了一个可选的本地开发服务器，这个本地服务器基于 node.js 构建，可以实现你想要的让浏览器自动刷新显示你所修改后的结果。

安装 webpack-dev-server

html 复制代码

npm install --save-dev webpack-dev-server

配置 devServer

修改 webpack.config.js 文件，添加 devServer 配置：

javascript 复制代码

module.exports = {  
  // ...  
  devServer: {  
    static: './dist', // 告诉服务器从哪里提供内容  
    open: true, // 自动打开浏览器  
  },  
};

修改 `package.json`

在 package.json 文件的 scripts 部分添加一个启动开发服务器的脚本：

javascript 复制代码

"scripts": {  
  // ...  
  "start": "webpack serve --open"  
},

启动开发服务器

在终端或命令提示符中运行以下命令来启动开发服务器：

javascript 复制代码

npm start

现在，当你修改源代码并保存时，Webpack 会自动重新编译代码，并且浏览器会自动刷新显示最新的结果。