大白话Webpack 配置与使用的详细步骤和插件应用
啥是 Webpack
Webpack 就像是一个超级管家，在我们开发网页的时候，会有各种各样的文件，像 JavaScript 文件、CSS 文件、图片等等。这些文件就像是家里的各种物品，分散在不同的地方，而且有的物品还得按照特定顺序摆放、处理之后才能正常使用。Webpack 这个管家就负责把这些分散的文件收集起来，按照我们的要求进行打包、处理，最后变成一个或几个可以直接在网页上使用的“大包裹”，让网页能顺利运行。
Webpack 配置与使用详细步骤
1. 初始化项目
首先得有个项目文件夹，在这个文件夹里打开命令行工具，运行下面的命令来初始化一个新的项目：
npm init -y
npm init 是用来初始化一个 package.json 文件的，这个文件就像是项目的说明书，记录着项目的各种信息，比如项目名称、版本、依赖的包等等。-y 表示默认同意所有选项，快速创建 package.json 文件。
2. 安装 Webpack
接着安装 Webpack 和 Webpack CLI（一个命令行工具，方便我们在命令行里使用 Webpack）：
npm install webpack webpack-cli --save-dev
--save-dev 表示把它们作为开发依赖安装，因为只有在开发阶段才会用到它们。
3. 创建项目文件结构
在项目根目录下创建一个 src 文件夹，这个文件夹用来存放我们的源代码。在 src 文件夹里创建一个 index.js 文件，这就是我们的入口文件，Webpack 会从这个文件开始，顺着文件里的各种引用关系，去把其他相关的资源都找出来。还可以在 src 文件夹里创建一个 styles.css 文件，用来写一些样式。
4. 编写入口文件和 CSS 文件
src/index.js文件：
// 引入 CSS 文件
import './styles.css';// 这里可以写其他的 JavaScript 代码
console.log('Hello, Webpack!');
src/styles.css文件：
body {background-color: lightblue;
}
5. 创建 Webpack 配置文件
在项目根目录下创建一个 webpack.config.js 文件，这个文件就像是你给管家的工作说明书，告诉它该怎么工作。下面是一个简单的配置示例：
const path = require('path');module.exports = {// 入口文件，Webpack 从这里开始打包entry: './src/index.js',// 出口配置，打包后的文件放在哪里output: {// 打包后的文件存放的目录，使用 path.resolve 方法得到绝对路径path: path.resolve(__dirname, 'dist'),// 打包后的文件名filename: 'bundle.js'},// 模块配置，主要是加载器module: {rules: [{// 匹配所有的.css 文件test: /\.css$/,use: [// 把 CSS 插入到 DOM 中'style-loader',// 解析 CSS 文件中的 @import 和 url() 等'css-loader']}]}
};
6. 安装加载器
上面的配置里用到了 style-loader 和 css-loader，需要安装它们：
npm install style-loader css-loader --save-dev
7. 运行 Webpack
在命令行里运行下面的命令来启动 Webpack 打包：
npx webpack
npx 是一个工具，它可以直接运行项目里安装的命令。运行完这个命令后，Webpack 就会根据 webpack.config.js 里的配置，从 src/index.js 开始，把相关的资源都打包到 dist/bundle.js 文件里。
8. 创建 HTML 文件
在 dist 文件夹下创建一个 index.html 文件，并且引入打包好的 bundle.js 文件：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Webpack 示例</title>
</head><body><!-- 引入打包后的 JavaScript 文件 --><script src="bundle.js"></script>
</body></html>
Webpack 插件应用
1. HtmlWebpackPlugin
这个插件可以自动生成一个 HTML 文件，并且把打包好的 JavaScript 和 CSS 文件自动引入到这个 HTML 文件里。
- 安装插件：
npm install html-webpack-plugin --save-dev
- 修改
webpack.config.js文件：
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');module.exports = {entry: './src/index.js',output: {path: path.resolve(__dirname, 'dist'),filename: 'bundle.js'},module: {rules: [{test: /\.css$/,use: ['style-loader','css-loader']}]},plugins: [new HtmlWebpackPlugin({// HTML 文件的标题title: 'Webpack 示例',// 生成的 HTML 文件的文件名filename: 'index.html'})]
};
这样，每次打包的时候，HtmlWebpackPlugin 会自动生成一个 index.html 文件，并且把 bundle.js 文件自动引入进去。
2. CleanWebpackPlugin
这个插件会在每次打包之前，先把之前打包生成的文件清理掉，保证打包目录里的文件都是最新的。
- 安装插件：
npm install clean-webpack-plugin --save-dev
- 修改
webpack.config.js文件：
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');module.exports = {entry: './src/index.js',output: {path: path.resolve(__dirname, 'dist'),filename: 'bundle.js'},module: {rules: [{test: /\.css$/,use: ['style-loader','css-loader']}]},plugins: [// 清理之前打包生成的文件new CleanWebpackPlugin(),new HtmlWebpackPlugin({title: 'Webpack 示例',filename: 'index.html'})]
};
3. TerserPlugin
这个插件可以压缩和混淆 JavaScript 代码，让打包后的文件体积更小，加载速度更快。
- 修改
webpack.config.js文件：
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const TerserPlugin = require('terser-webpack-plugin');module.exports = {entry: './src/index.js',output: {path: path.resolve(__dirname, 'dist'),filename: 'bundle.js'},module: {rules: [{test: /\.css$/,use: ['style-loader','css-loader']}]},optimization: {minimizer: [// 压缩和混淆 JavaScript 代码new TerserPlugin()]},plugins: [new CleanWebpackPlugin(),new HtmlWebpackPlugin({title: 'Webpack 示例',filename: 'index.html'})]
};
通过以上步骤和插件的使用，我们就可以用 Webpack 很好地管理和打包项目资源啦。
