17370845950

代码打包是将JS、CSS、图片等资源按依赖合并转换压缩为更少更小的浏览器友好文件；Webpack以入口文件为起点构建依赖图，核心配置包括entry、output、loader和plugin。

代码打包就是把多个 JavaScript 文件、CSS、图片等资源，按依赖关系合并、转换、压缩成更少、更小、更适合浏览器运行的文件。Webpack 是最常用的打包工具之一，它以一个入口文件（如 index.js）为起点，自动分析模块依赖，构建出静态资源图，再输出打包结果。

核心概念：入口、出口、loader、plugin

Webpack 运行靠四个关键配置：

• entry：告诉 Webpack 从哪个文件开始找依赖，比如 ./src/index.js
• output：指定打包后的文件输出到哪，例如 dist/bundle.js
• loader：让 Webpack 能处理非 JS 文件，比如用 babel-loader 转译 ES6+ 语法，用 css-loader 加载 CSS
• plugin：执行更广的任务，比如清理 dist 目录（clean-webpack-plugin）、提取 CSS 到单独文件（mini-css-extract-plugin）

快速上手：三步跑起一个基础打包

假设你有一个简单项目，含 src/index.js 和 src/style.css：

1. 安装 Webpack：npm init -y && npm install --save-dev webpack webpack-cli
2. 创建 webpack.config.js：

   const path = require('path');
   module.exports = {
     entry: './src/index.js',
     output: {
       filename: 'bundle.js',
       path: path.resolve(__dirname, 'dist')
     }
   };

3. 在 package.json 的 scripts 中加："build": "webpack"，然后运行 npm run build

处理样式和现代语法：加 loader 就行

默认 Webpack 只懂 JS。要加载 CSS 或写 ES6/TypeScript，得配 loader：

• 装依赖：npm install --save-dev style-loader css-loader
• 在配置中加 rules：

  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ['style-loader', 'css-loader']
      }
    ]
  }

• 类似地，用 babel-loader + @babel/preset-env 支持新语法

开发体验优化：用 webpack-dev-server

不想每次改完都手动打包？装 webpack-dev-server：

• npm install --save-dev webpack-dev-server
• 加配置：devServer: { open: true, port: 3000 }
• 脚本改成 "dev": "webpack serve"，运行 npm run dev 就能热更新预览

基本上就这些。Webpack 看似配置多，但多数项目从上面几步起步，再按需加功能，不复杂但容易忽略 loader 和 plugin 的作用边界。