Webpack安装Bootstrap - 缺少popper.js.map

Question

我按照https://getbootstrap.com/docs/4.0/getting-started/webpack/中的说明操作,并且还使用npm安装了jquery和popper.js.

仍然当我使用输出bundle.js时,浏览器继续发送popper.js.map的 GET请求,我需要所有资产成为bundle.js的一部分.

我搜索了很多正确的答案,但没有一个解释上面提到的说明有什么错误.请帮忙.

Answer 1

在popper.js文件的最后有一个这样的注释:

//# sourceMappingURL=popper.js.map

删除它为我解决了问题.

Answer 2

如果您使用的是 Laravel 5+ 和/或 Laravel Mix，这应该会有所帮助：

要使警告消失，只需添加.sourceMaps()到您的 js 文件中webpack.mix.js：

mix.js('resources/js/app.js', 'public/js').sourceMaps();

该方法将告诉 Laravel Mix 包含源映射，因为它们默认被禁用。

Answer 3

删除上面建议的评论对我不起作用，所以，如果你真的想得到popper.min.js.map代码......

在popper github 页面上，他们有实际popperjs 文件的链接：https : //unpkg.com/popper.js/dist/umd/popper.min.js

如果您将其更改为https://unpkg.com/popper.js/dist/umd/popper.min.js.map，您将拥有所需的一切！

Answer 4

我们可以使用Webpack 3 中的SourceMapDevToolPlugin排除 Popper.js 的源映射。

const webpack = require('webpack')

module.exports = {
  // other configs
  plugins: [
    // other plugin configs
    new webpack.SourceMapDevToolPlugin({
      exclude: ['popper.js']
    })
  ]
}

这是我目前能看到的解决此问题的最佳方法，尤其是当 Popper.js 作为npm install --save popper.js. 这允许在不修改 Popper.js 源文件的情况下更新依赖包。

Answer 5

CSS 映射只是浏览器开发人员工具用来帮助开发人员查找代码中某些内容的文件。

无需担心，用户一切正常。