Question

在我的common.js入口点，我正在导入一个加载Bootstrap核心的大型.scss文件（来自node_modules）。

import Layzr from 'layzr.js';
import './js/vendor/bootstrap/transition';
import './js/vendor/bootstrap/collapse';
import './js/vendor/scrollTo';
import './sass/common.scss'; // this guy

这个人看起来有点像那样

// common.scss
@import "variables.scss";
@import "bootstrap-custom";
//.. other imports

webpack如何知道最终在哪里找到bootstrap？

{
            loader: 'sass-loader',
            options: {
              sourceMap: true,
              includePaths: [
                path.resolve(__dirname, './node_modules/bootstrap-sass/assets/stylesheets'),//that's how
              ]
}

我的问题是，每次运行webpack时，它都会更改与boostrap导入相关的哈希值，并更改common.js.map文件

{"version":3,"sources":[
"webpack:///common/common.js",
"webpack:///webpack/bootstrap 12b09b93ea869cb3a747",
"webpack:///......

为什么这个哈希值发生变化，因为我没有改变任何东西（以及这个哈希开始的是什么......）

Answer 1

默认情况下，给定webpack编译的唯一哈希值与最终条目包源代码库中webpack的清单/运行时的引用一起显示。在sourcemap中，该引用称为webpack:///webpack/bootstrap，它与Twitter的Bootstrap无关，因此非常混乱。

我猜你的webpack实现使用了一个插件（例如https://github.com/soundcloud/chunk-manifest-webpack-plugin），它将清单引用移出捆绑的js，因此条目包本身不会每次都改变其他地方你的来源有所改变但是，这些插件似乎不会干扰源图创建，因此您最终会获得修改后的源图，但会使用未经修改的软件包。

通过将清单分解为自己的包，可以稍微澄清一下，如下所示：https://survivejs.com/webpack/optimizing/separating-manifest/

Answer 2

当你使用[hash]时，webpack会为每个bundle计算一个哈希值，如果一个文件发生变化，整个哈希值会发生变化（或者至少就是我理解它的方式）。尝试使用为每个块计算的chunkhash

Webpack正在更改源映射中的散列，以获取未更改的文件

2 个答案: