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

林译川

2026-09-07 • 👁 0人浏览过

浏览器原生不支持 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

默认约定大于配置： Comet AI 浏览器下载 Comet AI 浏览器，体验由 Perplexity AI 驱动的革命性上网方式。内置 AI 助手可实时总结网页、跨标签页对比信息、自动执行任务。告别繁琐操作，让 AI 成为你的浏览副驾，大幅提升研究与工作效率。支持 Windows、macOS、Android 和 iOS。下载立即学习 “ Java免费学习笔记（深入） ”；入口 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

。

相关文章