Webpack 核心与基础使用

Webpack 是一个模块打包工具，用于将项目中的模块（包括 JavaScript、CSS、图片等）打包成一个或多个文件，供浏览器使用。

1. 安装 Webpack

1.1. 全局安装（不推荐）

npm install -g webpack webpack-cli

1.2. 本地安装（推荐）

在项目目录下执行：

npm install --save-dev webpack webpack-cli

1.3. 创建基本目录结构

项目目录结构：

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

 1.4. 初始化项目

在项目根目录下执行以下命令初始化项目：

npm init -y

2. 基础配置文件

2.1. 基础配置说明

1. Entry（入口）

• 入口文件指示 Webpack 应该使用哪个模块作为构建其内部图依赖的开始。进入入口起点后，Webpack 会找出哪些模块和库是入口起点（直接和间接）依赖的。

• 可以是一个字符串、数组或对象。

2. Output（输出）

• 输出选项指示 Webpack 如何以及在哪里输出它所创建的 bundles，以及如何命名这些文件。

3. Loaders（加载器）

• 加载器用于告诉 Webpack 如何处理非 JavaScript 文件。

4. Plugins（插件）

• 插件用于执行范围更广的任务，包括打包优化资源、管理和注入环境变量等。

5. Mode（模式）

• 通过选择 development、production 或 none 之一，来设置 Webpack 内置的优化

2.2. 基本配置示例

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');module.exports = {mode: 'development', // 模式，可以是 'development', 'production', 'none'// Entry 配置entry: {main: './src/index.js',vendor: './src/vendor.js'},// Output 配置output: {filename: '[name].[contenthash].js', // 输出文件名，使用 [name] 占位符path: path.resolve(__dirname, 'dist'), // 输出路径clean: true, // 每次构建前清理 /dist 文件夹},// Loaders 配置module: {rules: [{test: /\.css$/, // 匹配所有的 .css 文件use: ['style-loader', 'css-loader'], // 使用这两个 Loader 处理 CSS 文件},{test: /\.js$/, // 匹配所有的 .js 文件exclude: /node_modules/, // 排除 node_modules 文件夹use: {loader: 'babel-loader', // 使用 babel-loaderoptions: {presets: ['@babel/preset-env'], // 使用 @babel/preset-env 预设},},},{test: /\.(png|jpg|gif)$/i, // 匹配图片文件type: 'asset/resource', // 处理方式},],},// Plugins 配置plugins: [new HtmlWebpackPlugin({template: './src/index.html', // 模板文件}),],// 开发服务器配置devServer: {static: './dist', // 本地服务器内容目录hot: true, // 启用热模块替换},
};

好的，让我们更详细地介绍 Webpack 5 的配置，包括 entry、output、module、resolve 等核心配置项，并给出详细的代码示例。

2.3. 配置详解

2.3.1. Entry配置

Entry 属性指示 Webpack 应该使用哪个模块作为构建其内部依赖图的开始。进入入口起点后，Webpack 会找出哪些模块和库是入口起点（直接和间接）依赖的。

• 单入口

module.exports = {entry: './src/index.js',
};

• 多入口

module.exports = {entry: ['./src/index.js', './src/another-module.js'],
};

• 对象形式

module.exports = {entry: {main: './src/index.js',vendor: './src/vendor.js',},
};

2.3.2. Ouput配置

output 属性指示 Webpack 如何以及在哪里输出它所创建的 bundles，以及如何命名这些文件。

• 基本配置

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

• 使用模板字符串

module.exports = {output: {filename: '[name].[contenthash].js',path: path.resolve(__dirname, 'dist'),publicPath: '/',},
};

• 清理 /dist 文件夹

module.exports = {output: {filename: '[name].[contenthash].js',path: path.resolve(__dirname, 'dist'),clean: true,},
};

2.3.3. Module配置

module 属性决定了如何处理项目中的不同类型的模块。它由 rules 数组组成，每个规则指示 Webpack 如何处理特定类型的文件。

• JavaScript 和 CSS 处理

module.exports = {module: {rules: [{test: /\.js$/, // 匹配所有的 .js 文件exclude: /node_modules/, // 排除 node_modules 文件夹use: {loader: 'babel-loader',options: {presets: ['@babel/preset-env'],},},},{test: /\.css$/, // 匹配所有的 .css 文件use: ['style-loader', 'css-loader'], // 使用这两个 Loader 处理 CSS 文件},],},
};

• 图片和字体文件处理

module.exports = {module: {rules: [{test: /\.(png|jpg|gif|svg)$/, // 使用内置的 asset/resource 模块类型type: 'asset/resource',},{test: /\.(woff|woff2|eot|ttf|otf)$/,type: 'asset/resource',},],},
};

• 加载其他类型的资源

module.exports = {module: {rules: [{test: /\.html$/,use: ['html-loader'], // 处理 HTML 文件中的 img 标签},{test: /\.csv$/,use: ['csv-loader'], // 处理 csv 文件},{test: /\.xml$/,use: ['xml-loader'], // 处理 XML 文件},],},
};

2.3.4. Resolve配置

resolve 属性用于配置 Webpack 如何解析模块路径。

• 基本配置

module.exports = {resolve: {extensions: ['.js', '.json', '.wasm'], // 自动解析确定的扩展},
};

• 设置别名

const path = require('path');module.exports = {resolve: {alias: {Utilities: path.resolve(__dirname, 'src/utilities/'),Templates: path.resolve(__dirname, 'src/templates/'),},},
};

• 模块解析目录

module.exports = {resolve: {modules: [path.resolve(__dirname, 'src'), 'node_modules'], // 告诉 Webpack 解析模块时应该搜索的目录},
};

2.4. 完整示例

// Entry 配置
entry: {main: './src/index.js',vendor: './src/vendor.js',
},// Output 配置
output: {filename: '[name].[contenthash].js', // 输出文件名，使用 [name] 占位符path: path.resolve(__dirname, 'dist'), // 输出路径publicPath: '/',clean: true, // 每次构建前清理 /dist 文件夹
},// Module 配置
module: {rules: [{test: /\.js$/, // 匹配所有的 .js 文件exclude: /node_modules/, // 排除 node_modules 文件夹use: {loader: 'babel-loader',options: {presets: ['@babel/preset-env'],},},},{test: /\.css$/, // 匹配所有的 .css 文件use: ['style-loader', 'css-loader'], // 使用这两个 Loader 处理 CSS 文件},{test: /\.(png|jpg|gif|svg)$/, // 匹配图片文件type: 'asset/resource', // 使用内置的 asset/resource 模块类型},{test: /\.(woff|woff2|eot|ttf|otf)$/,type: 'asset/resource', // 使用内置的 asset/resource 模块类型},{test: /\.html$/, // 匹配 HTML 文件use: ['html-loader'], // 使用 html-loader 处理 HTML 文件中的 img 标签},{test: /\.csv$/,use: ['csv-loader'], // 使用 csv-loader 处理 csv 文件},{test: /\.xml$/,use: ['xml-loader'], // 使用 xml-loader 处理 XML 文件},],
},// Plugins 配置
plugins: [new HtmlWebpackPlugin({template: './src/index.html', // 模板文件}),new MiniCssExtractPlugin({filename: '[name].[contenthash].css', // 输出的 CSS 文件名}),
],// Resolve 配置
resolve: {extensions: ['.js', '.json', '.wasm'], // 自动解析确定的扩展alias: {Utilities: path.resolve(__dirname, 'src/utilities/'),Templates: path.resolve(__dirname, 'src/templates/'),},modules: [path.resolve(__dirname, 'src'), 'node_modules'], // 告诉 Webpack 解析模块时应该搜索的目录
},// 优化配置
optimization: {minimize: true, // 启用最小化minimizer: [new TerserPlugin(), // 压缩 JavaScriptnew CssMinimizerPlugin(), // 压缩 CSS],splitChunks: {chunks: 'all', // 分割所有类型的代码块},
},// 开发服务器配置
devServer: {static: './dist', // 本地服务器内容目录hot: true, // 启用热模块替换
},

3. 运行Webpack

3.1. 开发模式

在 package.json 中添加脚本：

"scripts": {"start": "webpack serve --open","build": "webpack"
}

然后运行：

npm start

3.2. 生产模式

修改 webpack.config.js 中的 mode 为 'production'，然后运行：

npm run build

通过以上步骤，我们详细介绍了 Webpack 5 的核心配置项，包括 entry、output、module 和 resolve 等，并提供了一个完整的配置示例和使用指南。