_by blueBings的博客_
🚀 前言
Webpack 是一个非常强大的模块打包工具，在现代前端开发中扮演着重要角色。本文将手把手教你如何安装和配置 Webpack4，让你快速上手这个工具！🎯
第一步：准备工作📝
确保你的电脑已经安装了 Node.js 和 npm（或 yarn）。可以通过以下命令检查是否安装成功：
`node -v` 和 `npm -v` 或 `yarn -v`。
第二步：初始化项目🌱
进入你想要创建项目的目录，运行以下命令来初始化一个新的 npm 项目：
```bash
npm init -y
```
这会生成一个 `package.json` 文件，用于管理依赖。
第三步：安装 Webpack 和 Webpack CLI💡
接着，安装 Webpack 和 Webpack CLI：
```bash
npm install webpack webpack-cli --save-dev
```
安装完成后，你会在 `package.json` 中看到新增的 `devDependencies`。
第四步：配置 WebpackWebpack 的核心在于配置文件 webpack.config.js。以下是一个简单的配置示例：
```javascript
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist'),
},
};
```
第五步：运行 Webpack⚡
配置完成后，可以使用以下命令来打包代码：
```bash
npx webpack
```
打包完成后，你会在 `dist` 文件夹中找到生成的 `bundle.js` 文件。
🎉 结语
通过以上步骤，你就成功完成了 Webpack4 的安装与基本配置！接下来，你可以尝试引入更多插件和 loader 来优化你的构建流程。继续探索吧！🚀