Webpack 非 WebStorm 自带功能，而是需项目自配 webpack.config.js 和 npm 脚本；WebStorm 仅识别并运行它们，关键在路径用 path.resolve、publicPath 设置正确及脚本定义完备。
webpack 不是 WebStorm 自带功能，它本质是 Node.js 工具链——WebStorm 只负责调用和辅助。你配的不是“WebStorm 的 webpack”，而是**项目自身的 webpack 配置 + WebStorm 对它的识别与运行支持**。
怎么让 WebStorm 正确识别并运行 webpack？
关键不在 WebStorm 设置里点几下，而在项目根目录是否存在合法的 webpack.config.js 和可执行的 npm 脚本。
- 先确保项目已初始化：
npm init -y生成package.json - 本地安装 webpack 及 CLI：
npm install --save-dev webpack webpack-cli webpack-dev-server - 手动创建
webpack.config.js，至少包含entry和output（路径必须用path.resolve(__dirname, ...)或path.join(__dirname, ...)，不能写死相对路径） - 在
package.json的scripts中加一条："build": "webpack --mode=production"（开发用"dev": "webpack serve"） - WebStorm 会自动检测
package.json里的脚本，右键 → “Run” 即可启动，无需额外配置
为什么改了配置却没生效？常见路径陷阱
__dirname 是 Node.js 全局变量，但新手常误用 ./ 或绝对路径，导致打包输出错位、HTML 找不到 bundle.js、CSS 加载 404。
-
entry必须指向真实存在的 JS 文件，比如path.resolve(__dirname, 'src/main.js')，而不是'./src/main.js'（后者在某些 CLI 版本下解析异常） -
output.path必须是绝对路径，path.resolve(__dirname, 'dist')安全；写成'dist'或'./dist'在 WebStorm Terminal 中可能因工作目录不一致而失败 -
output.publicPath影响浏览器加载资源的 URL 前缀：开发用'/'（配合webpack-dev-server），静态部署时要改成'./'，否则 CSS/JS 请求会发到域名根目录，404
Vue 项目打包后白屏？别只盯路由模式
很多教程只说“别用 history 模式”，但真正卡住你的，往往是 assetsPublicPath 和 HTML 中资源路径的双重脱节。
- 对 vue-cli 2.x 项目：修改
config/index.js中build.assetsPublicPath: '/'→'./' - 对 vue-cli 3+/vite 项目：改
vue.config.js的publicPath: '/'→'./'（或设为''） - 打包后打开
dist/index.html，检查浏览器控制台 Network 标签页：如果js/app.xxx.js请求地址是http://localhost/js/app.xxx.js（缺dist/），说明publicPath还没生效 - 用
http-server启服务看效果：npx http-server dist，别双击 HTML——文件协议下相对路径会被浏览器拦截
调试 webpack 配置本身？别用 console.log
想确认 webpack.config.js 是否被正确读取、参数是否如预期？靠打印日志容易漏掉异步或模块化影响。
- 在
webpack.config.js开头加一句：console.log('✅ config loaded, entry:', config.entry);，然后运行npx webpack --mode=none --dry-run（模拟构建不输出文件） - 更可靠的是用 WebStorm 的 Node.js 调试器：新建一个
debug-config.js，内容为require('./webpack.config.js');，右键 Debug —— 这样能单步看变量、查路径拼接结果 - 避免在配置里写复杂逻辑：Webpack 4+ 默认有
mode，别再手动判断环境设process.env.NODE_ENV，容易和 CLI 冲突
path.resolve、publicPath 和 package.json 里那个看似简单的 "build" 脚本。 
