怎样进行JavaScript中的模块打包【教程】

浏览器原生不支持 Node.js 风格模块解析，import 路径须为完整 URL 或相对/绝对路径，且无法自动处理 node_modules、tree-shaking 等构建能力；webpack 最小配置需 entry、output（path 绝对路径）、mode；vite 依赖约定（如 index.html + type="module"）实现零配置启动；生产环境残留 console.log 多因 mode 未生效或 terser 未启用。

JavaScript 模块打包不是靠浏览器原生完成的，必须借助打包工具（如 webpack、vite、esbuild）把 import/export 语句转换成可执行的单文件或分块文件。

为什么直接在浏览器里用 import 会报错？

虽然现代浏览器支持 type="module"，但有硬性限制：

• 所有 import 路径必须是完整 URL 或以 /、./、..

  

  / 开头 —— 不能写 import { foo } from 'lodash'
• 不支持 Node.js 风格的包解析（比如从 node_modules 自动找入口、处理 package.json#exports）
• 无法做代码分割、tree-shaking、环境变量注入等构建时能力

webpack 基础配置要填哪几个关键字段？

最小可用配置至少包含这三项，缺一不可：

• entry：指定打包入口文件，例如 ./src/index.js
• output：指定输出路径和文件名，path 必须是绝对路径（用 path.resolve()）
• mode：设为 'development' 或 'production'，否则默认 'production' 且无提示

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

用 vite 启动开发服务器为什么不需要配置文件？

vite 默认约定大于配置：

• 入口 HTML 文件必须叫 index.html，且其中需含
• 它自动识别 import 中的 bare specifier（如 'vue'），并从 node_modules 解析、转译、按需 serve
• 构建时（vite build）才真正打包，此时才需要处理 resolve.alias 或 build.rollupOptions 等

打包后发现 console.log 还在生产代码里？

这是 mode: 'production' 没生效的典型表现。常见原因：

• 没在 webpack.config.js 中显式设置 mode，而 CLI 默认启用 production，但若用 require('./webpack.config') 方式加载，可能被忽略
• 用了 DefinePlugin 手动定义 process.env.NODE_ENV，但值是字符串 'production' 而不是字面量，导致压缩器无法判定条件分支可删
• terser-webpack-plugin 被禁用或版本太低（Webpack 5+ 内置，但老项目可能覆盖了）

最稳的方式：始终用 CLI 参数控制，比如 npx webpack --mode=production。