Javascript 开发人员控制台中的Webpack2路径显示实际的文件名

我们刚刚从webpack1迁移到webpack2，升级后有些样式无法正确呈现

当我在dev控制台中查看当前已损坏的DOM元素时，我看到控制台现在显示的是实际文件的路径，而在旧版本中，它只是显示文件名。另外，当鼠标悬停在文件名上时，它会显示相对路径，但以'webpack:///.src/.."

下面是devconsole的两个单独的屏幕截图，展示了我的意思：

以下是两个网页包配置文件：

版本2（提供文件路径）

从“webpack”导入webpack；
从“autoprefixer”导入autoprefixer；
从“cssnano”导入cssnano；
从“html网页包插件”导入HtmlWebpackPlugin；
从“../config”导入配置；
从“调试”导入_调试；
const debug=_debug（'app:webpack:config'）；
const path=config.utils\u路径；
const{{uuuuuuu DEV_uuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuu；
调试（“创建配置”）；
const webpackConfig={
名称：'客户'，
目标：“网络”，
devtool:'源映射'，
决心：{
模块：[
path.base（config.dir_客户端），
“节点_模块”
],
扩展：['.js'，'.jsx']
},
模块：{}
};
// ------------------------------------
//入口点
// ------------------------------------
const APP_ENTRY_PATH=PATH.base（config.dir_client）+'/main.js'；
webpackConfig.entry={
应用程序：_DEV__
？[APP\u ENTRY\u PATH，`webpack hot middleware/client？PATH=${config.compiler\u public\u PATH}\uuuu webpack\u hmr`]
：[APP_ENTRY_PATH]，
引导：“引导加载程序”，
供应商：config.compiler\u供应商
};
// ------------------------------------
//束输出
// ------------------------------------
webpackConfig.output={
文件名：`[name].${config.compiler\u hash\u type}].js`，
path:path.base（config.dir\u dist），
publicPath:config.compiler\u public\u path
};
// ------------------------------------
//插件
// ------------------------------------
webpackConfig.plugins=[
新的webpack.DefinePlugin（config.globals），
新的webpack.ProvidePlugin({
“jQuery”：“jQuery”，
“$”：“jquery”
}),
新HtmlWebpackPlugin({
模板：path.client（'index.html'），
哈什：错，
favicon:path.client（'static/favicon.ico'），
文件名：“index.html”，
注射：“身体”，
缩小：{
collapseWhitespace：true
}
})
];
如果（开发）{
调试（'为实时开发启用插件（HMR，无错误）。'；
webpackConfig.plugins.push(
新建webpack.HotModuleReplacementPlugin（），
新网页。NoEmitOnErrorsPlugin（）
);
}否则，如果（生产）{
调试（“为生产启用插件（UglifyJS）”；
webpackConfig.plugins.push(
新建webpack.optimize.UglifyJsPlugin({
压缩：{
没有使用过：是的，
死亡密码：对，
警告：错误
}
})
);
}
//在测试期间不要拆分捆绑包，因为我们只希望导入一个捆绑包
如果（！\uuuu测试）{
webpackConfig.plugins.push(
新建webpack.optimize.commonChunkPlugin({
名称：[“供应商”]
})
);
}
// ------------------------------------
//这过去被称为“预加载程序”。现在“规则”强制执行“预”
// ------------------------------------
webpackConfig.module.rules=[
{
测试：/\（js|jsx）$/，
强制执行：“预”，
加载程序：“eslint加载程序”，
包括：/src/，
选项：{
configFile:path.base（'.eslintrc'），
emitWarning:_DEV__
}
}
];
// ------------------------------------
//过去被称为“装载机”。现在是“规则”
// ------------------------------------
//JavaScript/JSON
webpackConfig.module.rules.push({
测试：/\（js|jsx）$/，
排除：/node_模块/，
使用：[
{loader:'babel loader'，
选项：{
cacheDirectory:true，
插件：['transform-runtime']，
预设值：u_DEV__
？[‘es2015’、‘反应’、‘阶段0’、‘反应hmre’]
：['es2015'、'react'、'stage-0']
}
}
]
});
//风格
常量cssLoader=！config.compiler\u css\u模块
? {loader:'css loader'，选项：{sourceMap:true}
：{loader:'css loader'，
选项：{
模块：对，
sourceMap:true，
进口装载机：1，
localIdentName:“[name]__[local]__[hash:base64:5]”
}};
const postssloader={
加载器：“postss加载器”，
选项：{
插件：（）=>[
自动刷新器({
加：是的，
删除：对，
浏览器：[“上两个版本”]
}),
cssnano(
{预设：
[“默认”，
{
评论：{
removeAll:是的
}
}
]
})],
安全：是的，
sourceMap:true
}
};
webpackConfig.module.rules.push({
测试：/\.scss$/,，
包括：/src/，
使用：[
“样式加载器”，
cssLoader，
PostssLoader，
{loader:'sass loader'，选项：{sourceMap:true，includePaths:[path.client（'style'）]}
]
});
webpackConfig.module.rules.push({
测试：/\.css$/,，
包括：/src/，
使用：[
“样式加载器”，
cssLoader，
邮政编码加载器
]
});
//不要将全局SCS视为模块
webpackConfig.module.rules.push({
测试：/\.scss$/,，
排除：/src/，
使用：[
“样式加载器”，
“css加载器？源地图”，
PostssLoader，
{loader:'sass loader'，选项：{sourceMap:true，includePaths:[path.client（'style'）]}
]
});
//不要将全局、第三方CSS视为模块
webpackConfig.module.rules.push({
测试：/\.css$/,，
排除：/src/，
使用：[
“样式加载器”，
“css加载器？源地图”，
邮政编码加载器
]
});
//文件加载器
/*eslint禁用*/
webpackConfig.module.rules.push(
{test:/\.woff（\？.*）$/，loader:'url loader？prefix=font/&name=[path][name].[ext]&limit=10000&mimetype=application/font-woff'}，
{test:/\.woff2（\？.*）$/，loader:'url loader？prefix=font/&name=[path][name].[ext]&limit=10000&mimetype=application/font-woff2'}，
{test:/\.otf（\？.*）$/，loader:'file loader？prefix=font/&name=[path][name].[ext]&limit=10000&mimetype=font/opentype'}，