node_js/tutorials/webpack

📦Webpack 入门教程

Webpack 是现代前端开发中常用的模块打包工具，能够自动处理 JavaScript、CSS、图片等静态资源。以下是核心知识点：

1. 基础功能

   • 模块化打包：将多个文件合并为一个或多个 bundle
   • 代码分割：通过 splitChunks 实现按需加载
   • 加载器支持：如 Babel、CSS Loader、URL Loader 等
   • 插件系统：扩展构建流程（如 HtmlWebpackPlugin）
   

2. 安装方式

   npm install --save-dev webpack webpack-cli
   

   ✔ 全局安装：npm install -g webpack
   ✔ 局部安装：推荐在项目目录执行上述命令

   

3. 配置文件
   webpack.config.js 结构示例：

   module.exports = {
     entry: './src/index.js',
     output: {
       filename: 'bundle.js',
       path: path.resolve(__dirname, 'dist')
     },
     module: {
       rules: [
         { test: /\.js$/, use: 'babel-loader' },
         { test: /\.css$/, use: ['style-loader', 'css-loader'] }
       ]
     }
   };
   

   📌 配置项说明：entry/output/module/plugins 等

   

4. 常用插件

   • HtmlWebpackPlugin：生成 HTML 文件并注入 bundle
   • CleanWebpackPlugin：清理构建输出目录
   • HotModuleReplacementPlugin：热更新功能
   

🔗 了解更多关于 Webpack 的高级用法，请访问 /node_js/advanced/webpack
📌 注意：实际使用中需根据项目需求调整配置参数