Опция Webpack 4 devtool не работает с webpack-dev-server
Прежде чем я решил опубликовать эту проблему, я сделал несколько вещей в качестве проверки фона. Итак, моя проблема:
- я использую webpack v4.6.0 и webpack-dev-server v3.1.3 - они отлично работают вместе, но сейчас я пытаюсь настроить исходные карты для своего приложения Похоже, что опция devtool не работает.
По крайней мере для меня, я попробовал и протестировал каждый вариант из списка:
- Webpack 4 - Sourcemaps : эта проблема предполагает, что
devtool: 'source-map'должен работать из коробки, но это не так для меня - , как сделать исходный файл webpack для исходных файлов : добавление
devtoolModuleFilenameTemplate: info =>'file://' + path.resolve(info.absoluteResourcePath).replace(/\\/g, '/')в мою конфигурацию вывода не сильно помогло, вместо client.js показывает мне index.js, хотя
- https: // github. com / webpack / webpack / Issues / 6400 : этот не является точным описанием моей проблемы, потому что попытка описанных здесь методов мне тоже не помогла
- Я пытался использовать
webpack.SourceMapDevToolPlugin, но он также не работает с моими настройками, даже когда я удаляю devtools или устанавливаю их в false - Я не использую плагин UglifyJS здесь
- Я знаю, что webpack-dev-server находится в обслуживании сейчас я попробовал webpack-serve, но кажется, что исходные карты с ним тоже не работают
- Я пробовал packa-source-map-support Также, но не повезло, у вас схожая ситуация с здесь :
Знаете ли вы, что эта проблема будет исправлено каким-то пиаром или вы пытались решить это самостоятельно? Любые советы или помощь приветствуется!
Я хотел бы получить вывод, как описано здесь, в блоге с прямыми ссылками на мои файлы и исходный код файлов.
Мой 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"
}
} мой вывод в консоли: 
Редактировать:
Я видел подобный вопрос здесь , но, похоже, никто не отвечает. Ошибка была сделана специально! Это относится не только к ошибкам линтинга, но и к каждой ошибке моего приложения. Вот ссылка на мое репозиторий GITHUB: https://github.com/marharyta/webpack-fast-development
ОБНОВЛЕНИЕ 01.05.2018
Я создал еще одно хранилище с настройкой очистки: https://github.com/marharyta/webpack-4.6.0-test И подробное объяснение того, как я сюда попал: https://medium.com/p/79fb676417f4/edit Некоторые предложения были сделаны участниками веб-пакета, но они все еще не работали для меня: 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 : //medium.com/@riittagirl/how-to-solve-webpack-problems-the-practical-case-79fb676417f4