Webpack 从入门到精通

(创作不易，感谢有你，你的支持，就是我前行的最大动力，如果看完对你有帮助，请留下您的足迹）

一、Webpack 简介

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

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

二、Webpack 的核心概念

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

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

部分添加一个构建脚本：

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

构建项目

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

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 加载器：

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

配置 Webpack 以使用 CSS 加载器：

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

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

import './style.css';

使用图片加载器

为了能够在 JavaScript 模块中导入图片，你需要使用

file-loader

。

安装图片加载器：

npm install --save-dev file-loader

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

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

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

import imgSrc from './image.png';

五、插件（Plugins）的使用

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

使用 HtmlWebpackPlugin

HtmlWebpackPlugin

是一个非常有用的插件，它可以为你生成一个 HTML5 文件，其中包括使用

script

标签的 body 中的所有 webpack 包。这对于在文件名中包含每次会随着编译而发生变化哈希的 webpack bundle 尤其有用。

安装 HtmlWebpackPlugin：

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

配置 Webpack 以使用 HtmlWebpackPlugin：

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：

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

配置 Webpack 以使用 CleanWebpackPlugin：

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

六、开发服务器（DevServer）

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

安装 webpack-dev-server

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

配置 devServer

修改

webpack.config.js

文件，添加

devServer

配置：

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

修改

package.json

在

package.json

文件的

scripts

部分添加一个启动开发服务器的脚本：

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

启动开发服务器

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

npm start

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