Webpack多模块打包配置教程

本文深入浅出地讲解了 Webpack 的本质与核心配置逻辑：它并非万能代码生成器或编译器，而是一个专注静态模块依赖分析与打包的工具；文章从最简可用配置入手，手把手演示如何零插件、零loader跑通JS模块打包，并清晰拆解CSS、图片等资源的加载原理（强调loader执行顺序与asset-module的智能分发机制），同时直击新手高频痛点——打包后代码不执行，一针见血指出问题往往不在配置本身，而在HTML引用路径、publicPath设置与浏览器实际请求链路的脱节，倡导用Network面板快速定位404等真实运行时问题，让读者既懂原理、又会排错。

webpack 是什么，它不做什么

webpack 不是“自动帮你写代码”的工具，它是个静态模块打包器：你给它一个入口文件（比如 src/index.js），它顺着 import / require 关系把所有依赖的 JS、CSS、图片、字体等“连起来”，最终输出一或多个浏览器能直接加载的文件（如 dist/main.js）。它不编译 JSX 或 TypeScript —— 那得靠 babel-loader 或 ts-loader；它也不压缩 HTML —— 得配 html-webpack-plugin。

最简可用配置长什么样

从零开始跑通 webpack，只需要三样东西：安装、入口文件、配置文件。不需要插件、不用 loader，先让 JS 模块链跑起来。

• npm init -y && npm install --save-dev webpack webpack-cli
• 创建 src/index.js，里面写 import './math.js'; console.log('loaded');
• 创建 math.js，内容为 export const add = (a, b) => a + b;
• 新建 webpack.config.js，只写这几句：

const path = require('path');

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

运行 npx webpack，就能在 dist/main.js 看到打包结果 —— 它已把 index.js 和 math.js 合并，并保留了 ES Module 语义（虽然浏览器还不能直接执行，但结构已就绪）。

怎么让 CSS、图片也进包里

webpack 默认只认识 JS。要处理其他类型资源，必须用 loader，且 loader 的执行顺序是从右到左（类似函数调用链）。

• CSS：装 css-loader（解析 @import 和 url()）+ style-loader（把 CSS 插入
  

  密码登录在这里

  微信扫码登录或注册

  

  打开微信扫一扫，快速登录/注册

  登录即同意 用户协议 和 隐私政策

  微信登录更方便

  • 密码登录
  • 注册账号

  

  忘记密码

  登录

  

  注册

  登录即同意 用户协议 和 隐私政策

  返回登录

  • 重置密码

  发送验证码

  重置密码