Webpack 开启 Scope Hoisting 后模块变量被压缩导致报错？
我在项目里启用了 Webpack 的 Scope Hoisting（ModuleConcatenationPlugin），但发现某些模块里的变量名被重命名后，和其他模块冲突了，控制台报“xxx is not defined”。明明没开启时一切正常，这是为啥？
比如下面这个 utils.js 模块，里面导出了一个叫 data 的变量：
const data = { name: 'test' };
export function getData() {
return data;
}另一个文件 import 了 getData，但打包后 data 被重命名为 a 或别的短名，结果在某些条件下访问不到，是不是我配置有问题？
- 1
回答
11浏览
Webpack 5迁移后模块解析出错了怎么办？
我刚把项目从 Webpack 4 升级到 Webpack 5，结果一跑构建就报错，说找不到某些模块，比如 import Something from './utils' 这种写法现在直接提示找不到。 ...
- 1
回答
19浏览
Webpack 开启 Tree Shaking 后，Vue 组件里的未使用方法为啥没被删掉？
我用 Webpack 5 + Vue 2 做项目，明明开启了 Tree Shaking，但发现一些没用到的 methods 还是被打包进去了，体积下不来。我试过把 mode 设成 production...
- 1
回答
36浏览
Webpack IgnorePlugin配置后为什么没排除模块？
我在用Webpack优化项目时，想通过IgnorePlugin排除某个不常用的依赖模块。按照文档配置了以下代码，但打包后的bundle里还是能看到这个模块，到底是哪里出问题了？ const webpa...
- 2
回答
83浏览
为什么Webpack打包后模块内容为空？
我在用Webpack打包项目时，发现某个自定义模块导出的内容在打包后变为空对象。比如这个模块：export const data = { name: 'test' }，在入口文件import { da...
- 1
回答
44浏览
在Taro项目中，子组件无法继承父组件scoped样式里的CSS变量怎么办？
大家好，我在用Taro做小程序开发时遇到了样式继承问题。父组件用了scoped样式定义了CSS变量：:root { --primary-color: #1890ff; }，但子组件通过color: v...
- 1
回答
11浏览
Webpack 的 splitChunks 配置怎么才能让公共模块单独打包？
我在用 Webpack 做代码分割，想把多个入口共用的 lodash 和 axios 提出来单独打成一个 vendor.js，但不管怎么配 splitChunks，它们还是被打进每个入口 chunk ...
- 1
回答
13浏览
Webpack打包后体积太大，怎么有效压缩JS和CSS？
我们项目用的是 Webpack 5 + React，最近发现首屏加载特别慢，看了下打包后的 main.js 居然有 2.3MB（未压缩）。我已经开了 mode: 'production'，也试过用 T...
- 1
回答
15浏览
Webpack 开启多线程打包反而变慢了，是配置错了吗？
我用 Webpack 5 的 thread-loader 给 Babel 加了多线程，但打包时间没减少反而更久了，是不是哪里配错了？ 我的配置大概是这样的： { test: /.js$/, use: ...
- 1
回答
12浏览
Webpack打包后Source Map不生效是怎么回事？
我用Webpack打包项目时开启了source map，但浏览器里调试还是看不到原始代码，只显示bundle.js。明明配置里写了devtool: 'source-map'，也确认生成了.map文件，...
- 1
回答
67浏览
为什么切换到Vite后Sass配置不生效？Webpack和Vite的CSS处理配置有何不同？
我之前用Webpack配置了Sass，现在迁移到Vite后样式文件报错说找不到变量，但代码明明没改啊。之前在vue.config.js里通过chainWebpack添加了sass-loader，现在换...
先说解决方案：
1. 最简单的是在 webpack.config.js 里给 ModuleConcatenationPlugin 加个
optimization.concatenateModules: false，但这样性能上就亏了2. 更推荐的方法是把 utils.js 改成这样：
原理是 Scope Hoisting 会把模块代码提升到同一个作用域，如果多个模块都有
data变量就会被覆盖。用 IIFE 包裹后相当于创建了独立作用域，webpack 就不会乱改名了。性能上这个方案几乎没损耗，比关掉整个 Scope Hoisting 强多了。另外检查下你的 webpack 版本，低于 4.x 的话可能会有更多奇怪问题。