Webpack作为现代前端开发的重要工具之一,可以帮助我们更高效地管理和打包项目资源。首先,确保你的电脑已安装Node.js,这是运行Webpack的基础环境。打开终端,输入`npm install -g webpack webpack-cli`即可完成全局安装(推荐使用nvm管理版本)。如果只是想在项目中局部使用,可跳过全局安装,直接在项目目录下执行`npm init -y`初始化package.json后,再运行`npm install --save-dev webpack webpack-cli`。
接着,创建一个简单的`webpack.config.js`文件作为核心配置文件。以下是一个基础示例:
```javascript
const path = require('path');
module.exports = {
entry: './src/index.js', // 入口文件
output: {
filename: 'bundle.js', // 输出文件名
path: path.resolve(__dirname, 'dist') // 输出路径
},
};
```
保存后,在package.json中添加脚本命令`"build": "webpack"`,通过`npm run build`即可开始打包。Webpack的强大之处在于它能自动处理模块依赖关系,并支持多种加载器(Loaders)和插件(Plugins),让开发更加灵活便捷。不断实践,你会逐渐掌握更多高级功能!🚀