我创建了一个基于webpack的简单项目来学习戒烟。一切正常,除了sourcemap加载失败:
我不知道是谁的问题(webpack,chrome)。有谁知道吗?
复制步骤:
git clone https://github.com/tomwang1013/snabbdom-test.git
npm install
npm run dev
您尝试加载的源地图位于node_modules
中,而不是webpack捆绑包的一部分。 “如果未提取并处理到Webpack捆绑包的源地图中,浏览器可能会误解源地图数据” ref。加载应用后,导致Chrome开发者工具控制台中出现“ ERR_UNKNOWN_URL_SCHEME”。
要处理node_module
源映射到Webpack捆绑包,请使用source-map-loader
加载程序。这将解决控制台警告。
向package.json
添加依赖项:
"devDependencies": {
"source-map-loader": "^1.0.0",
...
}
更新webpack.config.js
:
module: {
rules: [
{
test: /\.js$/,
enforce: 'pre',
use: ['source-map-loader'],
},
],
},
一般来说,要为snabbdom-test项目生成源地图,可以使用SourceMapDevToolPlugin
。
更新webpack.config.js
:
const { SourceMapDevToolPlugin } = require("webpack");
plugins: [
new SourceMapDevToolPlugin({
filename: "[file].map"
}),
...
],