Artigo original: https://www.freecodecamp.org/news/how-to-solve-webpack-problems-the-practical-case-79fb676417f4/
Escrito por: Margarita Obraztsova
Eu diria que essa foi uma bela de uma jornada. Eu sabia que o Webpack não era fácil de configurar: tem muitas partes com muitas opções, tem o npm hell, e isso tudo muda com as novas atualizações. Não é surpresa que possa se tornar, facilmente, uma tarefa problemática de se resolver depois que alguma coisa não saiu como você esperava (ou seja, não do modo como está na documentação).
Tentando resolver
Minha jornada de debug começou com a seguinte configuração:
webpack.config.js
// webpack v4.6.0const 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.jsmodule.exports = { printWidth: 80, tabWidth: 2, semi: true, singleQuote: true, bracketSpacing: true};e, dentro da pasta src/:
index.html
<html> <head></head> <body> <div id="app"></div> <script src="<%= htmlWebpackPlugin.files.chunks.main.entry %>"></script> </body></html>index.js
import React from 'react';import { render } from 'react-dom';import Hello from './Hello';class App extends React.Component { render() { return ( <div> <Hello hello={'Hello, world! And the people of the world!'} /> </div> ); }}render(<App />, document.getElementById('app'));Hello.js
import React from 'react';import PropTypes from 'prop-types';class Hello extends React.Component { render() { return <div>{this.props.hello}</div>; }}Hello.propTypes = { hello: PropTypes.string};export default Hello;Este era o panorama geral da estrutura do projeto:
Então, qual era o problema?
Como você pode perceber, eu configurei o ambiente, o ESLinting, e assim por diante. Criei tudo para que eu pudesse começar a escrever meus códigos e adicionar meus novos componentes à minha nova e brilhante biblioteca.
Se eu tivesse um erro, porém, o que eu faria? Vamos bagunçar as coisas um pouco.
Se tentarmos rastrear a origem do erro direto do console do nosso navegador do Google Chrome, seria muito difícil. Nos depararíamos com algo assim:
Os mapas de origem não estão configurados!
Eu quero apontar para um arquivo Hello.js, não para o arquivo minificado.
Isso, provavelmente, é uma coisa pequena
OU, ao menos, era o que eu pensava. Então, tentei configurar os mapas de origem como era descrito na documentação, adicionando a devtool.
Quando o webpack coloca seu código-fonte em um bundle, pode se tornar difícil de rastrear erros e avisos de volta ao local original. Por exemplo, se você colocar em um bundle três (chamadobundle.js) arquivos-fonte,a.js,b.jsec.js, e se um dos arquivos-fonte contiver um erro, o stack trace simplesmente apontará parabundle.js. Isso nem sempre é útil, pois você provavelmente vá querer saber em qual arquivo-fonte está o erro.
Para facilitar o rastreamento de erros e avisos, o JavaScript oferece mapas de origem (texto em inglês), que mapeiam seu código compilado de volta ao código-fonte original. Se um erro vier deb.js, o mapa de origem informará isso com exatidão. (fonte)
Então, eu, inocentemente, assumi que isso funcionaria no meu arquivo 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 }, ...e no package.json
..."scripts": { "build": "webpack --mode production", "dev": "webpack-dev-server --mode development"}...Você tem que adicionar uma flag de desenvolvimento quando estiver trabalhando, ou, então, não vai funcionar como a documentação está dizendo. Ainda assim, mesmo com o valor sugerido, o mapa de origem não estava se comportando como eu esperei que fosse.
Se você ler este guia d0 SurviveJS – e você deveria fazê-lo – verá com seus próprios olhos.
Depois de esgotar todas as opções, eu fui ao Github tentar achar alguma solução possível.
Buscando soluções no GitHub
Tentei todas as sugestões nessa busca e nenhuma delas me ajudou.
Em certo ponto, cheguei a me questionar se havia algo errado com o meu webpack-dev-server. Acabei descobrindo que o webpack-dev-server já estava em manutenção há alguns meses.
Descobri, depois de encontrar por acaso esta issue, onde eles recomendam usar webpack-serve ao invés de webpack-dev-server.
Honestamente, foi a primeira vez que eu escutei sobre essa alternativa chamada webpack-serve. As documentações não pareciam promissoras também, mas eu, ainda assim, decidi dar uma oportunidade.
npm install webpack-serve --save-devEu criei serve.config.js
const serve = require('webpack-serve');const config = require('./webpack.config.js');serve({ config });Eu substituí webpack-dev-server por webpack serve no meu arquivo package.json.
Entretanto, o webpack-serve não me ajudou tampouco.
Nesse momento, eu me sentia como se tivesse esgotado cada sugestão que encontrei no GitHub:
- Webpack 4 — Sourcemaps : essa issue sugere que
devtool: 'source-map'deveria funcionar, mas esse não foi o caso para mim; - Como fazer o mapa de origem do webpack para os arquivos originais: adicionando
devtoolModuleFilenameTemplate: info =>'file://' + path.resolve(info.absoluteResourcePath).replace(/\\/g, '/'). A minha configuração de saída não me ajudou, mas, ao invés de me mostrar o arquivo client.js, me mostrou o index.js; - https://github.com/webpack/webpack/issues/6400: essa aqui não é uma descrição muito precisa do meu problema, então tentar executá-la não parecia que me ajudaria;
- Eu tentei usar
webpack.SourceMapDevToolPlugin, mas não funcionou com a minha configuração, mesmo quando eu excluí devtools ou o configurei como false; - Eu não usei o plug-in UglifyJS aqui, então configurar opções para isso não seria uma solução;
- Eu sei que o webpack-dev-server está em manutenção por agora. Então, eu tentei webpack-serve, mas parece que os arquivos de configuração não funcionaram também;
- Eu tentei o pacote source-map-support também, mas sem sorte. Eu vi uma situação similar aqui.
O abençoado StackOverflow
Eu estava perdendo um tempão para configurar os mapas de origem. Então, criei uma issue no StackOverflow.
Fazer o debugging da configuração do webpack normalmente é uma tarefa pesada: a melhor maneira a seguir é criar uma configuração do zero. Se alguma coisa nas documentações não funcionar como o esperado, talvez seja uma boa ideia encontrar uma issue parecida em uma branch, ou criar sua própria issue. Era o que eu pensava.
O primeiro rapaz que me respondeu estava realmente tentando me ajudar. Ele compartilhou sua própria configuração de trabalho. Ele até me ajudou criando um pull request.
Porém, tínhamos um problema aqui: por que sua configuração funciona? Olha, isso provavelmente não é magia, e temos alguma incompatibilidade de módulo aqui. Infelizmente, eu não pude entender por que minhas configurações não estavam funcionando:
O que passou é que ele fez, com a melhor das intenções, uma reestruturação do projeto do seu próprio jeito.
Isso significa que eu teria mais configurações ainda no projeto e teria também que mudar bastante coisa. Talvez, isso seria ok se eu tivesse fazendo uma configuração de teste, mas eu decidi fazer mudanças graduais nos arquivos para ver o que estava quebrando.
Dissecando a issue
Vamos dar uma olhada nas diferenças entre os arquivos Webpack e package.json dele e os meus. Apenas para deixar registrado, eu usei um repositório diferente na questão. Então, aqui está meu link para o repositório e para minha configuração.
// webpack v4.6.0const 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"}}Eu deixei eles interagirem propositalmente para que vocês pudessem ver minhas tentativas de debug. Tudo funcionou exceto os mapas de origem. Abaixo, eu vou compartilhar o que ele mudou na minha configuração - mas, obviamente, é melhor checar o pull request completo aqui.
// 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" } }Como você pôde perceber, ele deletou um montão de módulos e adicionou mode dentro das configurações. Dando uma olhada no pull request, você pode ver que ele também adicionou alguns hot-module replacement específicos orientados ao React.
Isso ajudou os mapas de origem a funcionarem através do sacrifício de vários plug-ins, mas não tem uma explicação muito concreta para ele fazer o que ele fez. Como uma pessoa que costuma ler a documentação, isso não era muito satisfatório para mim.
Mais tarde, peguei meu webpack.config.js inicial e comecei adicionar as mudanças passo a passo para ver quando os mapas de origem finalmente começariam a funcionar.
Mudança 1:
- new CleanWebpackPlugin('dist', {}),+ new CleanWebpackPlugin('dist'),Mudança 2:
Adicionei o webpack-dev-server às dependências, não às devDependencies:
...},"dependencies": { "webpack-dev-server": "^3.1.3"}}...Mudança 3:
Em seguida, removi algumas das configurações de devServer:
devServer: {- contentBase: './dist',+ hot: true,+ open: true },Mudança 4:
Remover o estilo:
...},devtool: 'inline-source-map', devServer: { hot: true, open: true },...use: [ { loader: 'babel-loader' }, { loader: 'eslint-loader' }]....Mudança 5:
Vamos tentar remover o plug-in de hashing WebpackMd5Hash agora:
...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(), ]};Mudança 6:
Agora, vamos tentar remover algumas configurações do HtmlWebpackPlugin:
...plugins: [ new CleanWebpackPlugin('dist'), new HtmlWebpackPlugin({ template: './src/index.html' })]};...Mudança 7:
Como podemos perceber nesse código, ele adicionou algumas opções aqui. Eu, pessoalmente, não entendo por que precisamos delas aqui. Eu não encontrei a informação nas documentações tampouco.
...resolve: { extensions: ['.js', '.jsx']},module: {...Mudança 8:
Deletando o caminho de saída:
...entry: { main: './src/index.js' },output: { filename: '[name].js'},devtool: 'inline-source-map',...Mudança 9:
Adicionando o plug-in hot-module replacement:
...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()]};...Mudança 10:
Adicionando — config ao package.json:
- "dev": "webpack-dev-server --mode development --open",+ "dev": "webpack-dev-server --config ./webpack.config.js",Vamos deixar as coisas claras: nesse ponto, eu já tinha quase reescrito a configuração.
Isso é um grande problema, visto que eu não posso reescrever tudo toda vez que algo não está funcionando!
Create-react-app na melhor fonte para aprender sobre webpack
Como último recurso, eu fui verificar como o create-react-app implementa o mapa de origem. Essa foi a melhor decisão depois de tudo. Essa é a configuração do webpack na versão dev.
Se conferirmos como o devtool é implementado aqui, veremos que:
// Você pode querer 'avaliar' se você prefere ver a saída compilada no DevTools.
https://github.com/facebook/create-react-app/issues/343.
devtool: ‘cheap-module-source-map’
Então, isso me apontou uma outra issue, encontrada aqui.
// webpack v4const 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: {Mudar as linhas ainda não funcionou - ainda! Eu aprendi que mapa de origem é uma questão que demanda tempo.
Perguntando para a pessoa certa
Todo projeto open source tem pessoas para mantê-lo. Nesse caso, era definitivamente uma boa alternativa perguntar aos meninos diretamente.
Embora meu método de tentativa e erro não tenha funcionado exatamente como eu esperava, fui surpreendida positivamente em como o time de manutenção estava disponível para responder.
Então, criei um repositório com a configuração que você encontra aqui. Dê uma olhada no segundo commit lá.
Para torná-lo mais fácil para você, aqui está meu projeto webpack.js, onde eu voltei para a minha configuração inicial, mais limpa:
// webpack v4const 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() ]};Depois de verificar meu código, o responsável pela manutenção criou uma issue.
Vamos recapitular o que ele incluiu aqui:
Configuração da opção modeO primeiro problema que encontrei dizia respeito a como a opçãomodefoi configurada. Nos scripts do npm,modeestava definido como:
webpack --mode production
A maneira correta seria:
webpack --mode=production
Os scripts do npm aparecem mais ou menos assim para mim no final:
"scripts": {
"build": "webpack --mode=production",
"start": "webpack-dev-server --mode=development --hot"
}
Também altereidevparastart, já que é mais padrão e esperado de outros desenvolvedores como comando. Você pode, de fato, usarnpm start, sem o comandorun?
..."scripts": { "build": "webpack --mode production", "dev": "webpack-dev-server --mode=development --hot"},...A seguir, ele sugeriu o seguinte:
devtool para mapas de origem
Sempre recomendo a opção inline-source-map. É a mais direta e está incluída no próprio bundle como um comentário ao final.module.exports = {
+ devtool: 'inline-source-map',
// rest of your config
}
Eu também recomendo criar um objeto separado e populá-lo somente em desenvolvimento:
comando
webpack-dev-server --mode=development NODE_ENV=development
webpack.config.js
const webpackConfig = {}
if (process.env.NODE_ENV === 'development') {
webpackConfig.devtool = 'inline-source-map'
}
Dessa maneira, você tem certeza de que o bundle em produção não é afetado por isso.
Então, ele sugeriu remover o ESLint da configuração de carregamento (em inglês, loaders):
Linting e experiência do desenvolvedor
Honestamente, eu deletaria eslint como um loader. É superinvasivo e atrapalha o fluxo de desenvolvimento. Eu prefiro adicionar um githook de precommit para verificar isso.Isso é superfácil e somente precisa adicionar um script como esse:
"scripts": {
+ "lint": "eslint ./src/**/*.js"
"build": "webpack --mode=production",
"start": "webpack-dev-server --mode=development --hot"
}
Então, combiná-lo com husky
e adicioná-lo aos scripts:
..."scripts": {"lint": "eslint ./src/**/*.js","build": "webpack --mode production","dev": "webpack-dev-server --mode=development --hot"},...Eu cometi um erro em src/Hello.js de propósito para ver como os mapas de origem funcionariam dessa vez.
import React from 'react';import PropTypes from 'prop-types';class Hello extends React.Component { console.log(hello.world); render() { return <div>{this.props.hello}</div>; }}Hello.propTypes = { hello: PropTypes.string};export default Hello;Como eu consertei o problema
O problema era o ESLint. Depois de especificar os modos corretamente e de remover o eslint-loader, os mapas de origem funcionaram corretamente!
Seguindo o exemplo que o mantenedor me deu, eu atualizei meu Webpack para:
// webpack v4const 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() ]};e meu package JSON para:
{"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"}}Finalmente, meus mapas de origem funcionaram!
Conclusões:
Mapas de origem tem pautado varias discussões de bugs desde 2016, como você pode ver aqui.
O Webpack precisa de ajuda com auditoria!
Depois de encontrar esse bug, eu submeti uma issue para o pacote ESLint loader.
Quando estamos falando de verificar a qualidade dos mapas de origem, nós podemos usar esta ferramenta.
O que você pode fazer se tiver um problema com o webpack?
Caso você se veja preso em um problema com Webpack, não se desespere! Siga os passos abaixo:
- Procure nas issues do GitHub situações similares às suas.
- Tente conferir os arquivos iniciais e ver como o recurso foi implementado lá, com o create-react-app, por exemplo.
- Faça perguntas no StackOverflow — não tenha medo! Tenha certeza de que você tentou todas as soluções possíveis ao seu alcance.
- Não hesite em fazer um tweet sobre o assunto e perguntar diretamente aos mantenedores.
- Crie issues no Github quando as encontrar. Isso vai ajudar muito os contribuidores!
Neste artigo, eu deixo o meu arquivo de configuração e o processo usado para configurá-lo passo a passo.
Nota: considerando que muitas das dependências do npm podem ter mudado quando você estiver lendo isso, essa mesma configuração pode não funcionar para você!
Se puder, compartilhe este artigo. Obrigada!