1. 初始化项目
npm init -y
2. 安装依赖
首先，确保已经安装 Node.js 和 npm（Node 包管理器）。
npm install webpack webpack-cli html-webpack-plugin webpack-dev-server style-loader css-loade --save-dev
3. 配置文件（webpack.config.js）
Webpack 的配置文件遵循 CommonJS 规范，一般命名为 webpack.config.js。以下是一个简单的配置示例：
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
mode: 'development', // 开发模式
entry: './src/index.js', // 入口文件
output: {
// 出口文件
path: path.resolve(__dirname, 'dist'), // 输出目录
filename: '[name].[hash].js', // 输出文件名（使用哈希以确保唯一性）
clean: true, // 清除之前的打包文件
},
module: {
rules: [
{
test: /\.css$/, // 匹配 CSS 文件
use: [
'style-loader', // 动态将样式插入到 HTML 中
'css-loader', // 将 CSS 转换为 JavaScript 代码
],
},
],
},
plugins: [
new HtmlWebpackPlugin({
template: './index.html', // HTML 模板文件
filename: 'index.html', // 输出的 HTML 文件名
chunks: ['main'], // 使用的代码块
}),
],
devServer: {
host: 'localhost', // 主机地址
port: 3000, // 端口号
open: true, // 自动打开浏览器
},
};
-
mode: 'development'设置 Webpack 的构建模式为开发模式，此模式下打包的代码不会进行压缩和混淆。 -
entry: './src/index.js'指定入口文件为src目录下的index.js。 -
output配置项指定了打包后的输出路径为dist目录，输出文件名为name.[hash].js，其中name对应入口文件名，[hash]是用于缓存破坏的哈希值。 -
module.rules定义了在遇到 CSS 文件时使用的 Loader，这里使用了style-loader和css-loader来处理 CSS 文件。 -
plugins数组中配置了HtmlWebpackPlugin插件，用于根据模板文件生成 HTML 文件，并将打包后的 JavaScript 文件自动注入到 HTML 文件中。 -
devServer配置了开发服务器的主机地址、端口号和是否自动打开浏览器等。
6. 使用
在命令行中执行以下命令：
npx webpack
