大白话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 很好地管理和打包项目资源啦。