【前端必学】webpack从入门到实战，打造高效开发流程🛠️通过本课程，你已经掌握了 webpack 的基本安装和使用

1. 什么是 webpack？

webpack 是一个基于模块化的打包（构建）工具，它把一切视为模块。webpack 通过一个开发时态的入口模块为起点，分析出所有的依赖关系，然后经过一系列的过程（如压缩、合并），最终生成运行时态的文件。

2. webpack 的特点

为前端工程化而生：webpack 致力于解决前端工程化，特别是浏览器端工程化中遇到的问题，让开发者集中注意力编写业务代码，而把工程化过程中的问题全部交给 webpack 来处理。
简单易用：支持零配置，可以不用写任何一行额外的代码就使用 webpack。
强大的生态：webpack 非常灵活、可以扩展。虽然 webpack 本身的功能不多，但它提供了一些可以扩展其功能的机制，使得大量的第三方库可以融入到 webpack 中。
基于 Node.js：由于 webpack 在构建的过程中需要读取文件，因此它是运行在 Node.js 环境中的。
基于模块化：webpack 在构建过程中要分析依赖关系，方式是通过模块化导入语句进行分析的，它支持各种模块化标准，包括但不限于 CommonJS、ES6 Module。

3. webpack 的安装

webpack 通过 npm 安装，它提供了两个包：

webpack：核心包，包含了 webpack 构建过程中要用到的所有 API。
webpack-cli：提供一个简单的 CLI 命令，它调用了 webpack 核心包的 API，来完成构建过程。

安装方式

全局安装：可以全局使用 webpack 命令，但无法为不同项目对应不同的 webpack 版本。
本地安装：推荐，每个项目都使用自己的 webpack 版本进行构建。

npm install --save-dev webpack webpack-cli

4. 使用 webpack

默认情况下，webpack 会以 ./src/index.js 作为入口文件分析依赖关系，打包到 ./dist/main.js 文件中。通过 --mode 选项可以控制 webpack 的打包结果的运行环境。

基本命令

npx webpack --mode development

--mode development：开发模式，不会对代码进行压缩。
--mode production：生产模式，会对代码进行压缩和优化。

配置文件

为了更好地控制构建过程，通常会创建一个 webpack.config.js 配置文件。以下是一个简单的配置文件示例：

const path = require('path');

module.exports = {
  entry: './src/index.js', // 入口文件
  output: {
    filename: 'main.js', // 输出文件名
    path: path.resolve(__dirname, 'dist') // 输出路径
  },
  mode: 'development', // 构建模式
  module: {
    rules: [
      {
        test: /\.js$/, // 匹配 .js 文件
        exclude: /node_modules/, // 排除 node_modules 目录
        use: {
          loader: 'babel-loader' // 使用 Babel 转换 ES6 代码
        }
      }
    ]
  }
};

运行构建

在 package.json 中添加一个 build 脚本：

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

然后运行：

npm run build

实战演练

1. 初始化项目

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

2. 安装 webpack 和 webpack-cli

npm install --save-dev webpack webpack-cli

3. 创建项目结构

my-webpack-project/
├── src/
│   └── index.js
├── dist/
├── package.json
└── webpack.config.js

4. 编写入口文件 `src/index.js`

import _ from 'lodash';

console.log(_.join(['Hello', 'World'], ' '));

5. 创建 `webpack.config.js`

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist')
  },
  mode: 'development',
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'
        }
      }
    ]
  }
};

6. 安装 Babel 及相关依赖

npm install --save-dev babel-loader @babel/core @babel/preset-env

7. 配置 Babel

在项目根目录下创建 .babelrc 文件：

{
  "presets": ["@babel/preset-env"]
}

8. 添加构建脚本

在 package.json 中添加构建脚本：

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

9. 运行构建

npm run build

构建完成后，dist 目录下会生成 main.js 文件，你可以在 HTML 文件中引入这个文件：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Webpack Project</title>
</head>
<body>
  <script src="dist/main.js"></script>
</body>
</html>

总结

通过本课程，你已经掌握了 webpack 的基本安装和使用方法。webpack 是一个强大的模块打包工具，能够帮助你解决前端工程化中的许多问题。

【前端必学】webpack从入门到实战，打造高效开发流程🛠️