在我决定发布这个问题之前，我做了很多事情作为背景调查。 所以，我的问题是：
- 我使用 webpack v4.6.0 和 webpack-dev-server v3.1.3 - 他们一起工作得很好，但现在我正在尝试为我的应用程序设置源映射，似乎开发工具选项 https://webpack.js.org/configuration/devtool/不起作用。
至少对我来说，我已经尝试并测试了列表中的每个选项：
devtool: 'source-map'应该开箱即用，但对我来说情况并非如此devtoolModuleFilenameTemplate: info =>'file://' + path.resolve(info.absoluteResourcePath).replace(/\\/g, '/') to my output config did not help much, instead of client.js it shows index.js for me though
webpack.SourceMapDevToolPlugin但它也不适用于我的设置，即使我删除开发工具或将它们设置为 false
您知道这个问题是否会通过一些公关来解决，或者您是否尝试过自己解决？任何提示或帮助表示赞赏！
我想获得此处描述的输出，在博客文章中 http://erikaybar.name/webpack-source-maps-in-chrome/直接链接到我的文件和原始文件代码。
我的 webpack.js
// webpack v4.6.0
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const WebpackMd5Hash = require('webpack-md5-hash');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const stylish = require('eslint/lib/formatters/stylish');
const webpack = require('webpack');
module.exports = {
entry: { main: './src/index.js' },
output: {
devtoolModuleFilenameTemplate: info =>
'file://' + path.resolve(info.absoluteResourcePath).replace(/\\/g, '/'),
path: path.resolve(__dirname, 'dist'),
filename: '[name].[hash].js'
},
devtool: 'source-map',
devServer: {
contentBase: './dist',
hot: true
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader'
},
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'eslint-loader',
options: {
formatter: stylish
}
}
]
},
plugins: [
// new webpack.SourceMapDevToolPlugin({
// filename: '[file].map',
// moduleFilenameTemplate: undefined,
// fallbackModuleFilenameTemplate: undefined,
// append: null,
// module: true,
// columns: true,
// lineToLine: false,
// noSources: false,
// namespace: ''
// }),
new CleanWebpackPlugin('dist', {}),
new HtmlWebpackPlugin({
inject: false,
hash: true,
template: './src/index.html',
filename: 'index.html'
}),
new WebpackMd5Hash(),
new webpack.NamedModulesPlugin(),
new webpack.HotModuleReplacementPlugin()
]
};我的包.json
{
"name": "post",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"storybook": "start-storybook -p 9001 -c .storybook",
"dev": "webpack-dev-server --mode development --open",
"build": "webpack --mode production"
},
"author": "",
"license": "ISC",
"devDependencies": {
"@storybook/addon-actions": "^3.4.3",
"@storybook/react": "v4.0.0-alpha.4",
"babel-cli": "^6.26.0",
"babel-core": "^6.26.0",
"babel-loader": "^7.1.4",
"babel-preset-env": "^1.6.1",
"babel-preset-react": "^6.24.1",
"babel-runtime": "^6.26.0",
"clean-webpack-plugin": "^0.1.19",
"eslint": "^4.19.1",
"eslint-config-prettier": "^2.9.0",
"eslint-loader": "^2.0.0",
"eslint-plugin-prettier": "^2.6.0",
"eslint-plugin-react": "^7.7.0",
"html-webpack-plugin": "^3.2.0",
"prettier": "^1.12.1",
"react": "^16.3.2",
"react-dom": "^16.3.2",
"webpack": "v4.6.0",
"webpack-cli": "^2.0.13",
"webpack-dev-server": "v3.1.3",
"webpack-md5-hash": "0.0.6",
"webpack-serve": "^0.3.1"
},
"dependencies": {
"source-map-support": "^0.5.5"
}
}my output in console is: 
Edit:
我看到一个类似的问题here https://stackoverflow.com/questions/49477274/webpack-4-2-how-can-i-obtain-the-original-source-file-name-and-line-line-numbe，但似乎没有人回答。这个错误是故意的！这不仅适用于 linting 错误，还适用于我的应用程序的每个错误。这是我的 GITHUB 存储库的链接：https://github.com/marharyta/webpack-fast-development https://github.com/marharyta/webpack-fast-development
更新 01.05.2018
我创建了另一个具有更清晰设置的存储库：https://github.com/marharyta/webpack-4.6.0-test https://github.com/marharyta/webpack-4.6.0-test以及我如何到达这里的详细解释：https://medium.com/p/79fb676417f4/edit https://medium.com/p/79fb676417f4/editwebpack 贡献者给出了一些建议，但对我来说仍然不起作用：https://github.com/marharyta/webpack-4.6.0-test/issues/1 https://github.com/marharyta/webpack-4.6.0-test/issues/1
更新 02.05.2018
经过长时间的调查，我在下面发布了我的答案。问题是 ESLint 和可能是一些模式标记，因为我必须使用 CLI 方式来完成。 我在这里也遇到了 ESLint 加载器的问题：https://github.com/webpack-contrib/eslint-loader/issues/227 https://github.com/webpack-contrib/eslint-loader/issues/227我还在这里创建了一篇包含更详细描述的帖子：https://medium.com/@riittagirl/how-to-solve-webpack-problems-the-practical-case-79fb676417f4 https://medium.com/@riittagirl/how-to-solve-webpack-problems-the-practical-case-79fb676417f4
因此，经过长时间的尝试和错误，我终于得到了一位 webpack 维护者的帮助。 主要问题是 eslint。如果将其作为加载程序加载，则会产生意外的行为。 通过从 js 的 webpack 加载器中删除 eslint 可以解决这个问题。
之前的webpack设置：
// webpack v4
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const WebpackMd5Hash = require('webpack-md5-hash');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const baseConfig = {
entry: { main: './src/index.js' },
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].[hash].js'
},
devServer: {
contentBase: './dist',
hot: true,
open: true
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
**use: [
{ loader: 'babel-loader' },
{
loader: 'eslint-loader',
options: { formatter: require('eslint/lib/formatters/stylish') }
}**
]
}
]
},
plugins: [
new CleanWebpackPlugin('dist'),
new HtmlWebpackPlugin({
inject: false,
hash: true,
template: './src/index.html',
filename: 'index.html'
}),
new WebpackMd5Hash()
]
};
if (process.env.NODE_ENV === 'development') {
baseConfig.devtool = 'inline-source-map';
}
module.exports = baseConfig之后运行的 webpack：
// webpack v4
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const WebpackMd5Hash = require('webpack-md5-hash');
const CleanWebpackPlugin = require('clean-webpack-plugin');
module.exports = {
entry: { main: './src/index.js' },
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].[hash].js'
},
devtool: 'cheap-module-source-map',
devServer: {
contentBase: './dist',
hot: true,
open: true
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
**use: [{ loader: 'babel-loader' }]**
}
]
},
plugins: [
new CleanWebpackPlugin('dist'),
new HtmlWebpackPlugin({
inject: false,
hash: true,
template: './src/index.html',
filename: 'index.html'
}),
new WebpackMd5Hash()
]
};我的 packeje.json 看起来像：
{
"name": "post",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "webpack --mode=production",
"start": "NODE_ENV=development webpack-dev-server --mode=development --hot"
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-core": "^6.26.0",
"babel-loader": "^7.1.4",
"babel-preset-env": "^1.6.1",
"babel-preset-react": "^6.24.1",
"babel-runtime": "^6.26.0",
"clean-webpack-plugin": "^0.1.19",
"eslint": "^4.19.1",
"eslint-config-prettier": "^2.9.0",
"eslint-loader": "^2.0.0",
"eslint-plugin-prettier": "^2.6.0",
"eslint-plugin-react": "^7.7.0",
"html-webpack-plugin": "^3.2.0",
"prettier": "^1.12.1",
"react": "^16.3.2",
"react-dom": "^16.3.2",
"webpack": "^4.6.0",
"webpack-cli": "^2.0.13",
"webpack-md5-hash": "0.0.6"
},
"dependencies": {
"webpack-dev-server": "^3.1.3"
}
}另请参阅在我的分支上创建的问题的建议：https://github.com/marharyta/webpack-4.6.0-test https://github.com/marharyta/webpack-4.6.0-test