javascript的构建工具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 插入标签）；顺序必须是 ['style-loader', 'css-loader']
图片/字体：用 asset-module（webpack 5+ 内置），不用再装 url-loader 或 file-loader
配置示例（加在 webpack.config.js 的 module.rules 里）：

module: {
  rules: [
    {
      test: /\.css$/i,
      use: ['style-loader', 'css-loader']
    },
    {
      test: /\.(png|svg|jpg|jpeg|gif|woff2?)$/i,
      type: 'asset'
    }
  ]
}

这样，你在 JS 里写 import logo from './l

ogo.png'; document.body.style.backgroundImage = `url(${logo})`; 就能工作。注意：asset 类型会自动判断：小文件转 base64，大文件单独输出并返回路径字符串。

为什么打包后代码在浏览器里不执行

常见原因不是配置错，而是没告诉浏览器去加载生成的 JS 文件。

webpack 只管生成 dist/main.js，不会自动生成 index.html
手动写 HTML 时，容易漏掉，或路径写成 ./main.js（实际应在 dist/ 目录下）
更稳妥的做法是用 html-webpack-plugin：它会在每次构建时自动生成 dist/index.html，并自动注入正确的 script 标签
别忽略开发服务器的根路径：用 webpack serve 时，默认访问 http://localhost:8080/，而 output.publicPath 默认是 /；如果改过 publicPath（比如设成 /assets/），就得确保 HTML 中引用的路径和它一致