- 入口（entry）配置
- 概念：入口起点是 Webpack 构建依赖图的开始。它告诉 Webpack 应该从哪个模块开始构建，并将其作为入口点，然后递归地解析和加载所有相关的模块。
- 实际配置示例 - 单入口应用：
- 如果是一个简单的 JavaScript 应用，假设项目结构如下：
src index.js（主入口文件）other.js（被index.js引用的文件）
- 在
webpack.config.js（假设这是 Webpack 配置文件）中的entry配置可以是：
module.exports = {entry: './src/index.js'};
- 实际配置示例 - 多入口应用（例如多页面应用）：
- 假设项目结构如下：
webpack.config.js中的entry配置可以是：
module.exports = {entry: {page1: './src/page1/index.js',page2: './src/page2/index.js'}};
- 这样配置后，Webpack 会为
page1和page2分别构建独立的依赖图，最终可以生成多个打包后的文件，用于多页面应用的不同页面。
- 输出（output）配置
- 概念：输出配置告诉 Webpack 如何处理和输出构建后的文件。包括文件名、路径等重要信息。
- 实际配置示例 - 基本配置：
const path = require('path');module.exports = {entry: './src/index.js',output: {filename: 'main.js',path: path.resolve(__dirname, 'dist')}};
- 这里
filename定义了输出文件的名称为main.js，path使用path.resolve方法确定了输出目录为项目根目录下的dist文件夹（__dirname表示当前配置文件所在的目录）。 - 实际配置示例 - 多入口输出配置：
const path = require('path');module.exports = {entry: {page1: './src/page1/index.js',page2: './src/page2/index.js'},output: {filename: '[name].js',path: path.resolve(__dirname, 'dist')}};
- 这里
filename中的[name]是一个占位符，它会被entry对象中的键（page1和page2）替换，这样就会分别输出page1.js和page2.js到dist目录。
- 解析器（loader）配置
- 概念：Webpack 本身只能理解 JavaScript 和 JSON 文件。Loader 让 Webpack 能够处理其他类型的文件，并将它们转换为有效的模块，这些模块可以添加到依赖图中。例如，将 CSS 文件转换为 JavaScript 模块，或者将 ES6/ES7 语法的 JavaScript 文件转换为浏览器可执行的 ES5 语法文件。
- 实际配置示例 - 处理 CSS 文件：
- 假设要在 JavaScript 中导入 CSS 文件，首先需要安装
style - loader和css - loader：
npm install style-loader css-loader - - save - dev
- 然后在
webpack.config.js中配置loader：
module.exports = {//...其他配置module: {rules: [{test: /\.css$/,use: ['style-loader', 'css-loader']}]}};
- 这里
rules是一个数组，每个规则对象有test属性（用于匹配文件类型，这里是匹配.css文件）和use属性（指定使用的loader，顺序很重要，从右到左执行，先css - loader处理 CSS 文件，然后style - loader将 CSS 添加到 DOM 中）。 - 实际配置示例 - 处理 ES6+ JavaScript 文件：
- 安装
babel - loader以及相关的 Babel 预设（例如@babel/preset - env）：
- 配置
loader：
module.exports = {//...其他配置module: {rules: [{test: /\.js$/,exclude: /node_modules/,use: {loader: 'babel-loader',options: {presets: ['@babel/preset - env']}}}]}};
- 这里
test匹配.js文件，exclude排除node_modules目录（通常不希望对这些已经编译好的模块再次编译），use中的babel - loader用于处理文件，并且通过options指定了 Babel 预设来转换 ES6 + 语法。
- 插件（plugin）配置
- 概念：插件用于执行范围更广的任务，比如打包优化、资源管理、注入环境变量等。与
loader专注于转换特定类型的模块不同，插件可以在 Webpack 构建过程的各个阶段介入。 - 实际配置示例 - HtmlWebpackPlugin（自动生成 HTML 文件并注入打包后的脚本）：
- 安装
html - webpack - plugin：
npm install html - webpack - plugin - - save - dev
const HtmlWebpackPlugin = require('html - webpack - plugin');module.exports = {//...其他配置plugins: [new HtmlWebpackPlugin({title: 'My App',template: './src/index.html',filename: 'index.html'})]};
- 这个插件会根据
template指定的 HTML 模板文件（这里是src/index.html）生成一个新的 HTML 文件（filename指定为index.html），并且会自动将打包后的脚本（如main.js）注入到生成的 HTML 文件中，title属性用于设置 HTML 文档的标题。 - 实际配置示例 - CleanWebpackPlugin（清理输出目录）：
- 安装
clean - webpack - plugin：
npm install clean - webpack - plugin - - save - dev
const {CleanWebpackPlugin} = require('clean - webpack - plugin');module.exports = {//...其他配置plugins: [new CleanWebpackPlugin()]};
- 这个插件会在每次构建前清理
output配置中指定的输出目录（如dist目录），确保没有旧的文件残留，使得每次构建的输出都是最新的。
- 模式（mode）配置
- 概念：模式是 Webpack 4 引入的一个重要配置选项，它可以设置为
development或production，用于告诉 Webpack 针对不同的环境进行优化。development模式注重开发体验，提供详细的错误信息和调试支持；production模式注重优化打包后的文件大小和性能。 - 实际配置示例：
module.exports = {mode: 'production'//...其他配置};
module.exports = {mode: 'development'//...其他配置};
- 当设置为
production模式时，Webpack 会自动启用一些优化，如代码压缩、模块标识符简化等。在development模式下，这些优化通常不会启用，以便于开发和调试。例如，在production模式下，生成的 JavaScript 文件会被压缩，变量名会被缩短，而在development模式下，代码更接近原始的编写形式，方便查看错误和调试。
