Автор оригинала: FreeCodeCamp Community Member.
Маргаритой Образцовой
Я бы сказал, что это было довольно путешествие. Я знал, что WebPack был непростым настроить: есть много частей со многими вариантами, есть NPM ад, и они меняются с новыми релизами. Неудивительно, что это может легко стать хлопотная задача для отладки, когда что-то не ходит, как вы ожидали (То есть не так, как он находится в документах).
Пытаясь отладить
Мое путешествие отладки началось со следующей настройкой:
webpack.config.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 webpack = require('webpack');module.exports = { entry: { main: './src/index.js' }, output: { path: path.resolve(__dirname, 'dist'), filename: '[name].[chunkhash].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() ]};
Package.json.
{ "name": "post", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "build": "webpack --mode production", "dev": "webpack-dev-server" }, "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-dev-server": "^3.1.3", "webpack-md5-hash": "0.0.6" }}.babelrc.
{ "presets": ["env", "react"]}.eslintrc.js.
module.exports = { env: { browser: true, commonjs: true, es6: true }, extends: [ 'eslint:recommended', 'plugin:react/recommended', 'prettier', 'plugin:prettier/recommended' ], parserOptions: { ecmaFeatures: { experimentalObjectRestSpread: true, jsx: true }, sourceType: 'module' }, plugins: ['react', 'prettier'], rules: { indent: ['error', 2], 'linebreak-style': ['error', 'unix'], quotes: ['warn', 'single'], semi: ['error', 'always'], 'no-unused-vars': [ 'warn', { vars: 'all', args: 'none', ignoreRestSiblings: false } ], 'prettier/prettier': 'error' }};prettier.config.js.
// .prettierrc.js
module.exports = { printWidth: 80, tabWidth: 2, semi: true, singleQuote: true, bracketSpacing: true};И в SRC/ папка:
index.html.
index.js.
import React from 'react';import { render } from 'react-dom';import Hello from './Hello';class App extends React.Component { render() { return ( Hello.js.
import React from 'react';import PropTypes from 'prop-types';
class Hello extends React.Component { render() { return {this.props.hello}; }}Hello.propTypes = { hello: PropTypes.string};export default Hello;
Это была общая структура проекта:
Так в чем была проблема?
Как видите, я настроил окружающую среду, Eslinting и так далее. Я создал все, чтобы я мог начать кодировать и добавить свои новые компоненты в мою блестящую новую компонентную библиотеку.
Но что, если я получил ошибку? Давайте что-то винт.
Если мы попытаемся отступить за возникновение ошибки с нашей консоли Browser Google Chrome, это будет очень сложно для нас. Мы бы наткнулись на что-то подобное:
Карты источников не настроены!
Я хочу, чтобы это указать на файл Hello.js И не в комплект файла, вроде этого парня сделал здесь Отказ
Это, вероятно, крошечные вещи
Или так я думал. Поэтому я пытался настроить исходные карты как описано в документах Добавляя devtool Отказ
Так что я наивно предположил, это будет работать в моем webpack.config.js :
...
module.exports = { entry: { main: './src/index.js' }, output: { path: path.resolve(__dirname, 'dist'), filename: '[name].[chunkhash].js' }, devtool: 'inline-source-map', devServer: { contentBase: './dist', hot: true, open: true }, ...и Package.json.
..."scripts": { "build": "webpack --mode production", "dev": "webpack-dev-server --mode development"}...Вы должны добавить флаг разработки при выполнении этого, в противном случае он не будет работать, так как документы говорят. Тем не менее, даже с предложенной ценностью, исходная карта не действовала, как я хотел.
Если вы читаете Это руководство От выжива, которые вы должны, вы увидите.
После того, как я попробовал каждый вариант от этого, я прибегал к охоте на выпуску GitHub.
Github проблема охоты
Попытка всех предложений в вопросах GitHub не помогло мне.
В какой-то момент я думал, что что-то не так с WebPack-dev-сервером. И оказалось, что WebPack-Dev-сервер уже несколько месяцев был в режиме обслуживания.
Я обнаружил, что после того, как я наткнулся на этот вопрос где Они рекомендуют использовать WebPack-Service вместо WebPack-Dev-Server.
Честно говоря, это был первый раз, когда я слышал об альтернативе под названием WebPack-подача Отказ Документы тоже не выглядели многообещающими. Но я все еще решил дать ему выстрел.
npm install webpack-serve --save-dev
Я создал feed.config.js.
const serve = require('webpack-serve');const config = require('./webpack.config.js');serve({ config });Я заменил WebPack-Dev-Server с WebPack подают в моей упаковке.json.
Но попробовать обслуживание WebPack – не решил.
Так что в этот момент я чувствовал, что использовал Каждое предложение я мог найти на Github:
- WebPack 4 – SourceMaps : Эта проблема предполагает, что
Devtool: «Исходная карта»должен работать из коробки, но это было не так для меня - Как сделать WebPack SourceMap в оригинальные файлы : Добавление
devtoolmodulefileNametemplate: info => 'Файл://' + path.resolve (info.absoluteresourcepath) .replace (/\\/g, '/’) на мой выходной конфиг не помогли. Но вместо Client.js он показал мне index.js. - https://github.com/webpack/webpack/issues/6400 : это не точное описание моей проблемы, поэтому попытка методов здесь не помогала мне
- Я пытался использовать
WebPack.sourceMapdevtoolpluginНо это не сработало с моей настройкой, даже когда я удалил devtools или установить их на ложь - Я не использовал плагин UGLITYSJS здесь, поэтому настройка вариантов для него не было решением
- Я знаю, что WebPack-dev-сервер сейчас в обслуживании, поэтому я попробовал служить WebPack, но казалось, что исходные карты не работают с ним либо
- Я попробовал пакет поддержки Source-Map, но не повезло там. У меня есть подобная ситуация, как видно здесь Отказ
Святой штабелист
Мне потребовалось на навсегда настроить исходные карты, поэтому я создал Выпуск на стойке.
Отладка конфигурации WebPack, как правило, является громоздким заданием: лучший способ пойти в это – создать конфигурацию с нуля. Если что-то из документации не работает, как ожидалось, это может быть хорошая идея попытаться найти подобную проблему на ветке или создать свой собственный вопрос. В любом случае я так думал.
Первый парень, который ответил на мою проблему, действительно пытался помочь. Он поделился своим собственным рабочим конфидентом. Даже помог мне, создав Запрос на тягу Отказ
Единственная проблема здесь: Почему его настройка работает ? Я имею в виду, это, вероятно, не волшебство, и есть какой-то модуль несовместимости там. К сожалению, я не мог понять, почему моя настройка не работала:
Дело в том, что он сделал это с лучшими намерениями путем реструктуризации проекта его пути.
Это означало, что у меня будет еще несколько настроек в проекте и придется изменить довольно много вещей. Это могло быть в порядке, если бы я проводил тестовую установку, но Я решил сделать постепенные изменения в файлах, чтобы увидеть, где он ломался.
Рассекать проблему
Итак, давайте посмотрим на различия между его WebPack и Package.json и мой. Просто для записи я использовал другой репо в вопросе, поэтому вот мой Ссылка на репо и моя настройка.
// 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' }, mode: 'development', devtool: 'eval-cheap-module-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() ]};
Package.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"}}
Я оставил их неповрежденным нарочно, чтобы вы могли видеть мои попытки отладки. Все работало, кроме как для исходных карт Отказ Ниже я поделюсь тем, что он изменился на моем конфиге – но это, конечно, лучше проверить полный запрос на потяжку здесь Отказ
// webpack v4.6.0 const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); // deleting this module from the config-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 = { // adding the mode setting here instead of a flag+ mode: 'development', entry: { main: './src/index.js' }, output: { // deleting the path and the template from the output- devtoolModuleFilenameTemplate: info =>- 'file://' + path.resolve(info.absoluteResourcePath).replace(/\\/g, '/'),- path: path.resolve(__dirname, 'dist'), filename: '[name].[hash].js' }, // adding resolve option here+ resolve: {+ extensions: ['.js', '.jsx']+ }, //changing the devtool option devtool: 'eval-cheap-module-source-map', // changing the devServer settings devServer: {- contentBase: './dist',- hot: true+ hot: true,+ open: true }, module: { rules: [ // putting my two checks into one (later he asked me in the chat to delete eslint option completely) {- test: /\.js$/,- exclude: /node_modules/,- loader: 'babel-loader'- },- {- test: /\.js$/,+ test: /\.jsx?$/, exclude: /node_modules/,- loader: 'eslint-loader',- options: {- formatter: stylish- }+ use: [+ { loader: 'babel-loader' },+ { loader: 'eslint-loader', options: { formatter: stylish } }+ ] } ] }, plugins: [ //cleaned some options- new CleanWebpackPlugin('dist', {}),+ new CleanWebpackPlugin('dist'), //deleted some settings from the HTMLWebpackPlugin new HtmlWebpackPlugin({- inject: false,- hash: true,- template: './src/index.html',- filename: 'index.html'+ template: './src/index.html' }), //completely removed the hashing plugin and added a hot module replacement one- new WebpackMd5Hash(),- new webpack.NamedModulesPlugin(),+ new webpack.HotModuleReplacementPlugin() ] };
Package.json.
"main": "index.js", "scripts": { "storybook": "start-storybook -p 9001 -c .storybook", //added different flags for webpack-dev-server- "dev": "webpack-dev-server --mode development --open",+ "dev": "webpack-dev-server --config ./webpack.config.js", "build": "webpack --mode production" }, "author": "",@@ -31,11 +31,6 @@ "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": {//moved dev server to dependencies- "source-map-support": "^0.5.5"+ "webpack-dev-server": "v3.1.3" } }
Как видите, он удалил кучу модулей и добавленным режимом внутри конфигурации. И посмотрите на запрос на потяжку, вы можете увидеть, что он также добавил некоторые специфические реагируемые HMR.
Это помогло исходным картам работать, пожертвовав большим количеством плагинов, но не было конкретного объяснения, почему он сделал то, что он сделал. Как человек, который читает документы, это не очень удовлетворило для меня.
Позже я взял свой первоначальный WebPack.config.js и начал добавлять изменения, шаг за шагом, посмотрите, когда исходные карты наконец начали работать.
Изменить 1:
- new CleanWebpackPlugin('dist', {}),+ new CleanWebpackPlugin('dist'),Изменить 2:
Я добавил WebPack-dev-сервер к зависимостям, а не devdependonds:
...
},
"dependencies": {"webpack-dev-server": "^3.1.3"
}
}
...
Изменить 3:
Далее я удалил некоторые настройки DevServer:
devServer: {- contentBase: './dist',+ hot: true,+ open: true },Изменить 4:
Давайте удалим стильный:
...
},
devtool: 'inline-source-map', devServer: { hot: true, open: true },...
use: [ { loader: 'babel-loader' }, { loader: 'eslint-loader' }]
....
Изменить 5:
Давайте попробуем удалить плагин HASHING WebPackmd5hash сейчас:
...
module.exports = {mode: 'development',entry: { main: './src/index.js' },output: { path: path.resolve(__dirname, 'dist'), filename: '[name].js' },devtool: 'inline-source-map',...plugins: [ new CleanWebpackPlugin('dist'), new HtmlWebpackPlugin({ inject: false, hash: true, template: './src/index.html', filename: 'index.html' })- new WebpackMd5Hash(), ]};
Изменить 6:
Теперь давайте попробуем удалить некоторые настройки из HTMLWebPackPlugin:
...
plugins: [ new CleanWebpackPlugin('dist'), new HtmlWebpackPlugin({ template: './src/index.html' })]};...
Изменить 7:
Как мы можем видеть в своем коде, он добавил некоторые варианты разрешения здесь. Я лично не понимаю, почему мы им нужны здесь. И я не мог найти информацию в документах.
...
resolve: { extensions: ['.js', '.jsx']},module: {...
Изменить 8:
Удаление выходного пути:
...
entry: { main: './src/index.js' },output: { filename: '[name].js'},devtool: 'inline-source-map',...
Изменить 9:
Добавление плагина замены горячего модуля:
...
const HtmlWebpackPlugin = require('html-webpack-plugin');const CleanWebpackPlugin = require('clean-webpack-plugin');const webpack = require('webpack');...
plugins: [ new CleanWebpackPlugin('dist'), new HtmlWebpackPlugin({ template: './src/index.html' }), new webpack.HotModuleReplacementPlugin()]};...
Изменение 10:
Добавление – config to package.json:
- "dev": "webpack-dev-server --mode development --open",+ "dev": "webpack-dev-server --config ./webpack.config.js",
Давайте сделаем что-то ясно: на данный момент я почти переписал конфигурацию.
Это массивная проблема, поскольку мы не можем просто переписать его каждый раз, что что-то не работает!
Create-React-App в лучшем источнике, чтобы узнать о WebPack
В крайнем случае, я пошел, чтобы проверить, как создание-реактивное приложение реализует отображение источника. Это было правильное решение в конце концов. Это конфиг WebPack Dev версия Отказ
Если мы проверяем, как devtool Реализовано там, мы увидим:
Так что этот вопрос указал меня на другой вопрос, найден здесь Отказ
// 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 = {mode: "development",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: {Изменение строк все еще не работает – пока! Я узнал, что исходная карта – это долговечный вопрос.
Спроси от нужных людей
Каждый проект с открытым исходным кодом имеет сопровождающие. Итак, в этом случае это было определенно правильным движением, чтобы сразу попросить парней.
Хотя метод испытания и ошибки от Даниэля на самом деле не работал для меня, я был приятно удивлен, как была мобильная команда сопровождающей.
Поэтому я создал репо с настройкой, которую вы можете увидеть здесь Отказ Проверьте второй коммит там.
Чтобы упростить для вас, вот мой проект WebPack.js, где я вернулся к своему первоначальному, очистительную настройку:
// 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 = { mode: 'development', entry: { main: './src/index.js' }, output: { path: path.resolve(__dirname, 'dist'), filename: '[name].[hash].js' }, devtool: 'inline-source-map', 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() ]};После проверки моего кода сопровождающий создал Выпуск Отказ
Давайте повторимся, что он там входит:
...
"scripts": { "build": "webpack --mode production", "dev": "webpack-dev-server --mode=development --hot"},...
Далее он предложил следующее:
Затем он предложил удалить Eslint от погрузчиков:
и добавляя его в скрипты:
...
"scripts": {"lint": "eslint ./src/**/*.js",
"build": "webpack --mode production",
"dev": "webpack-dev-server --mode=development --hot"
},
...
Я допустил ошибку в SRC/ Hello.js нарочно Чтобы увидеть, как исходные карты работали на этот раз.
import React from 'react';import PropTypes from 'prop-types';
class Hello extends React.Component { console.log(hello.world); render() { return {this.props.hello}; }}Hello.propTypes = { hello: PropTypes.string};export default Hello;Как я исправил проблему
Проблема была Эсвет. Но после уточнения режимов правильно и удаление 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');module.exports = { entry: { main: './src/index.js' }, output: { path: path.resolve(__dirname, 'dist'), filename: '[name].[hash].js' }, devtool: 'inline-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() ]};И моя посылка 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"}}
Наконец-то исходные карты работали!
Выводы:
Исходные карты были предметом нескольких обсуждений и ошибок с 2016 года, как вы можете увидеть здесь Отказ
WebPack нуждается в помощи с аудитом!
После нахождения этой ошибки я отправил Выпуск к пакету погрузчика ESLINT.
Когда дело доходит до проверки качества исходных карт, мы можем использовать Этот инструмент Отказ
Что вы можете сделать, если у вас есть проблема WebPack?
В случае, если вы спотыкаетесь с проблемой с WebPack, не паникуйте! Следуй этим шагам:
- Поиск в вопросах GitHub, похожее на ваш.
- Попробуйте проверить котельные пластины и посмотреть, как там функция, например, приложение Create-React-App.
- Задавайте вопросы на Stackoverflow – не боятся! Убедитесь, что вы закончили способы решить вашу проблему самостоятельно.
- Не стесняйтесь чирикать об этом и спрашивать сопровождающих напрямую.
- Создавайте проблемы, как только вы найдете их. Это поможет вкладчикам много!
В этой статье я предоставил вам свой файл конфигурации и процесс, который я использовал для настройки его шага за шагом.
Примечание. Поскольку многие зависимости NPM могут измениться к тому времени, когда вы прочитаете это, тот же конфигурация может не работать для вас! Я прошу вас оставить ваши ошибки в комментариях ниже, чтобы я мог редактировать его позже.
Пожалуйста, подпишитесь и хлопайте для этой статьи! Спасибо!