浏览器原生不支持 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 默认约定大于配置:
立即学习“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。










