Webpack多模块打包教程详解

小伙伴们对文章编程感兴趣吗？是否正在学习相关知识点？如果是，那么本文《Webpack配置详解：打包多模块与资源教程》，就很适合你，本篇文章讲解的知识点主要包括。在之后的文章中也会多多分享相关知识点，希望对大家的知识积累有所帮助！

webpack 是静态模块打包器，负责将入口文件及其依赖打包成浏览器可加载的文件；它不自动写代码、不编译JSX/TS（需loader）、不压缩HTML（需插件）。

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 插入