google-chrome - Chrome 开发者工具中的 Webpack 3.5.5 调试显示两个源文件。 webpack下1个://and other under webpack-internal://

Question

迁移了现有的 webpack 项目以使用 webpack 3.5.5 及其新配置。使用 Express 服务器而不是 webpack-dev-server。我必须在 webpack 中设置解析，如下所示。

const resolve = {
    extensions : ['.js'],
    modules : [
        'node_modules',
        'src',
        'testApplication'
    ]
};

当我使用 Chrome 开发者工具调试此 Webpack 应用程序时，我可以看到源文件的 2 个版本。

1. webpack下的第一个:// 与来源完全一致
2. webpack-internal://下的第二个 这是 babel 编译版本的源码。

我的问题是

1. 是否可以通过某种方式仅获取文件的第一个版本而不是两者？
2. 我认为node_modules应该隐式定义为一个模块，而不是我在resolve中显式指定它，是否可以通过某种方式使构建工作而无需在resolve中定义node_modules。
3. 在 webpack 3.5.5 中使用相同的源代码(从 webpack 1.14.0 迁移)后，express 服务器启动似乎减慢了节点速度。我的猜测是在解析下的模块中指定了node_modules导致了它。有什么想法吗？

Answer 1

1. 您可以使用 Webpack 的 devtool 属性配置源映射。您想要的是 devtool: 'source-map'( source )。这只会显示 webpack:// 下的原始源代码。请注意，还有其他选项可能更适合您的用例。

2. ["node_modules"] 是 resolve.modules 的默认值。但是，如果您指定 resolve.modules，则需要在数组中包含 "node_modules"。 (source)。在 resolve.modules 中指定 "src" 和 "testApplication" 似乎很奇怪。如果您有本地源文件，您应该使用相对路径来要求它们，例如require("./local_module")。这应该可以在 resolve.modules 中没有 src 的情况下工作

3. 在 resolve.modules 中指定 node_modules 不会导致任何速度下降(参见 2.)。速度变慢的可能原因有很多。例如。也许您错误地将 babel 应用于整个 node_modules 文件夹？