by Margarita Obraztsova
玛格丽塔(Margarita Obraztsova)
如何使用Webpack 4简化React.js开发过程 (How to streamline your React.js development process using Webpack 4)
In the real world of development, we have to add new features very quickly. In this tutorial, I will show you everything you can do to streamline this process and reach 120% of your dev speed.
在现实世界中，我们必须非常快速地添加新功能。 在本教程中，我将向您展示简化该过程并达到开发速度120％的所有方法。
Why, you might ask?
为什么 ，您可能会问？
Because doing manual work is extremely counter-productive when it comes to programming. We want to automate as much as possible. So I will show you what parts of the development process with React we can adjust using Webpack v4.6.0.
因为在编程时进行手工工作会适得其反。 我们希望尽可能地自动化。 因此，我将向您展示我们可以使用Webpack v4.6.0调整React开发过程的哪些部分。
I will not cover the first steps of setting up the webpack configuration, since I have already done it in my previous post. There, I described how to configure Webpack in greater detail. I will assume you are already familiar with the Webpack configuration basics, so we can start with a ready setup.
我不会介绍设置Webpack配置的第一步， 因为我在以前的帖子中已经做过。 在那里，我详细介绍了如何配置Webpack。 我假设您已经熟悉Webpack配置基础知识，因此我们可以从准备就绪的安装开始。
设置Webpack (Setting up Webpack)
In your webpack.config.js, enter the following code:
在您的webpack.config.js中 ，输入以下代码：
// 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].[chunkhash].js' }, 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() ]};and in your package.json:
并在您的package.json中 ：
{ "name": "post", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "build": "webpack --mode production", "dev": "webpack --mode development" }, "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", "html-webpack-plugin": "^3.2.0", "react": "^16.3.2", "react-dom": "^16.3.2", "webpack": "^4.6.0", "webpack-cli": "^2.0.13", "webpack-md5-hash": "0.0.6" }}Now you can download your node modules:
现在，您可以下载节点模块：
npm iand add src/ folder to your project with index.html and index.js
并使用index.html和index.js将src /文件夹添加到您的项目中
First in src/index.html:
首先在src / index.html中 ：
<html> <head> </head> <body> <div id="app"></div> <script src="<%= htmlWebpackPlugin.files.chunks.main.entry %>"></script> </body></html>and then in src/index.js:
然后在src / index.js中 ：
console.log("hello, world");Let’s run the dev script:
让我们运行dev脚本：
npm run devThere you have it: it compiled! Now let’s configure React for it, too.
在那里，它已编译！ 现在，我们也为其配置React。
设置您的React项目 (Setting up your React project)
Since React uses special syntax called JSX, we need to transpile our code. If we go to babel’s website, it has the preset for React.
由于React使用称为JSX的特殊语法，因此我们需要翻译我们的代码。 如果我们访问babel的网站，它具有React的预设 。
npm install --save-dev babel-cli babel-preset-reactOur .babelrc file should look like this:
我们的.babelrc文件应如下所示：
{ "presets": ["env", "react"]}Add some app initialisation to your index.js:
在您的index.js中添加一些应用程序初始化：
import React from 'react';import { render } from 'react-dom';class App extends React.Component {render() { return ( <div> 'Hello world!' </div> ); }}render(<App />, document.getElementById('app'));and run the dev script:
并运行开发脚本：
npm run devIf you managed to generate a ./dist folder with index.html and a main file with a hash, you have done great! We have our app compiling!
如果您设法用index.html生成一个./dist文件夹，并用一个哈希表生成一个主文件， 那么您做得很好！ 我们有我们的应用程序编译！
设置web-dev-server (Setting up web-dev-server)
Technically, we do not have to do this, since there are many node-based servers for front-end apps out there. But I recommend webpack-dev-server because it is designed to work with Webpack, and it supports a bunch of nice features such as hot module replacement, source maps, and so on.
从技术上讲，我们不必这样做，因为那里有许多用于前端应用程序的基于节点的服务器。 但是我建议使用webpack-dev-server，因为它旨在与Webpack一起使用，并且支持许多不错的功能，例如热模块替换 ， 源映射等 。
As they mention in the official documentation page:
正如他们在官方文档页面中提到的：
Use webpack with a development server that provides live reloading. This should be used for development only.
将webpack与提供实时重载的开发服务器一起使用。 这仅应用于开发。
Here is where it might get a bit confusing: how do you make webpack-dev-server only work for dev mode?
这可能会使您感到困惑：如何使webpack-dev-server只在dev模式下工作？
npm i webpack-dev-server --save-devin your package.json, adjust
在package.json中 ，调整
"scripts": { "dev": "webpack-dev-server --mode development --open", "build": "webpack --mode production"}Now it should launch a server and automatically open your browser tab with your app.
现在，它应该启动服务器，并使用您的应用程序自动打开浏览器选项卡。
Your package.json looks like this at this point:
此时您的package.json看起来像这样：
{ “name”: “post”, “version”: “1.0.0”, “description”: “”, “main”: “index.js”, “scripts”: { "dev": "webpack-dev-server --mode development --open", "build": "webpack --mode production" }, “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”, “html-webpack-plugin”: “3.2.0”, “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” }}Now if you try to modify something in your app, the browser should automatically refresh the page.
现在，如果您尝试修改应用程序中的某些内容，浏览器应该会自动刷新页面。
Next, you need to download React devtools as a Chrome extension.
接下来，您需要下载React devtools作为Chrome扩展。
This way you can debug your app from the Chrome console much more easily.
这样，您可以更轻松地从Chrome控制台调试应用。
ESLint配置 (ESLint configuration)
Why do we need it? Well, generally we do not have to use it. But ESLint is a handy tool. In our case, it will render our code (in the editor and terminal, and on the browser) and highlight our mistakes, typos, and errors if we have any. This is called linting.
我们为什么需要它？ 好吧，通常我们不必使用它。 但是ESLint是一个方便的工具。 就我们而言，它将呈现我们的代码(在编辑器和终端以及在浏览器中)，并突出显示我们的错误，错别字和错误(如果有)。 这称为棉绒 。
ESLint is an open-source JavaScript linting utility originally created by Nicholas C. Zakas in June 2013. There are alternatives to it, but so far it works great with ES6 and React, finds common problems, and integrates with other parts of the ecosystem.
ESLint是最初由Nicholas C. Zakas在2013年6月创建的开源JavaScript linting实用程序。它可以替代，但到目前为止，它与ES6和React兼容，可以发现常见问题，并且可以与生态系统的其他部分集成。
For now, let’s install it locally for our own new project. Of course, ESLint at this point has a large number of settings. You can read more about them on the official website.
现在，让我们在本地为我们自己的新项目安装它。 当然，此时ESLint具有大量设置。 您可以在官方网站上阅读有关它们的更多信息。
npm install eslint --save-dev./node_modules/.bin/eslint --initThe last command will create a config file. You will be prompted to choose among three options:
最后一条命令将创建一个配置文件。 系统将提示您选择三个选项：
In this tutorial, I chose the first one: answering questions. Here are my answers:
在本教程中，我选择了第一个：回答问题。 这是我的答案：
This will add .eslintrc.js file to your project directory. My generated file looks like this:
这会将.eslintrc.js文件添加到您的项目目录中。 我生成的文件如下所示：
module.exports = { "env": { "browser": true, "commonjs": true, "es6": true }, "extends": "eslint:recommended", "parserOptions": { "ecmaFeatures": { "experimentalObjectRestSpread": true, "jsx": true }, "sourceType": "module" }, "plugins": [ "react" ], "rules": { "indent": [ "error", 4 ], "linebreak-style": [ "error", "unix" ], "quotes": [ "error", "single" ], "semi": [ "error", "always" ] }};Nothing happens so far. Although this is a perfectly valid config, it is not enough — we have to integrate it with Webpack and our text editor for it to work. As I mentioned, we can have it in the code editor, terminal (as a linter), or as a precommit hook. We will configure it for our editor for now.
到目前为止没有任何React。 尽管这是一个完全有效的配置，但这还不够—我们必须将其与Webpack和文本编辑器集成在一起才能正常工作。 正如我提到的，我们可以在代码编辑器，终端(作为linter)或预提交钩子中使用它。 现在，我们将为我们的编辑器配置它。
Visual Studio Code的安装 (Setup for Visual Studio Code)
In case you are wondering, ESLint has a plugin for almost every major code editor, including Visual Studio Code, Visual Studio, SublimeText, Atom, WebStorm, and even vim. So go ahead and download the version for your own text editor. I will be using VS Code in this demo.
如果您想知道，ESLint的几乎所有主要代码编辑器都有一个插件，包括Visual Studio Code，Visual Studio，SublimeText ， Atom，WebStorm甚至是vim。 因此，继续为您自己的文本编辑器下载该版本。 我将在此演示中使用VS Code。
Now we can see some code errors appear. This is because the project has a configuration file that lints the code and complains when some rules are not obeyed.
现在我们可以看到一些代码错误出现。 这是因为项目具有一个配置文件，该文件可以减少代码并在未遵守某些规则时进行投诉。
You can debug it manually by checking the error message, or you can take advantage of it and just press save and it will automatically fix things.
您可以通过检查错误消息来手动调试它，也可以利用它，然后按保存，它将自动修复问题。
You can now go and adjust the ESLint settings:
现在，您可以调整ESLint设置：
module.exports = { "env": { "browser": true, "commonjs": true, "es6": true }, "extends": ["eslint:recommended", "plugin:react/recommended"], "parserOptions": { "ecmaFeatures": { "experimentalObjectRestSpread": true, "jsx": true }, "sourceType": "module" }, "plugins": [ "react" ], "rules": { "indent": [ "error", 2 ], "linebreak-style": [ "error", "unix" ], "quotes": [ "warn", "single" ], "semi": [ "error", "always" ] }};This will not break the build if you included double quotes by mistake instead of single quotes. It will also add some checks for JSX.
如果您错误地使用双引号而不是单引号，则不会破坏构建。 它还将为JSX添加一些检查。
添加更漂亮 (Add Prettier)
Prettier is one of the most popular formatters nowadays, and it is well-accepted by the coding community. It can be added to ESLint, your editor, and also installed as a pre-commit hook.
Prettier是当今最受欢迎的格式化程序之一，并且已被编码社区广泛接受。 可以将其添加到您的编辑器 ESLint中，也可以将其安装为预提交挂钩。
Once you install it, you can try to check your code again. If we write some weird indentation and press save, it should automatically format the code now.
安装后，您可以尝试再次检查代码。 如果我们写一些奇怪的缩进并按保存，它应该立即自动格式化代码。
That is not enough yet. In order for ESLint to work synched and not emit the same errors twice, or even have rules conflicts, you need to integrate it with your ESLint.
还不够。 为了使ESLint能够同步工作并且不会两次发出相同的错误，甚至不会发生规则冲突，您需要将其与ESLint集成。
npm i --save-dev prettier eslint-plugin-prettierIn the official docs, they recommend that you use yarn , but npm will do for now. To your .eslintrc.json file add:
在官方文档中，他们建议您使用yarn，但是npm现在可以使用。 在您的.eslintrc.json文件中添加：
... sourceType: "module"},plugins: ["react", "prettier"],extends: ["eslint:recommended", "plugin:react/recommended"],rules: { indent: ["error", 2], "linebreak-style": ["error", "unix"], quotes: ["warn", "single"], semi: ["error", "always"], "prettier/prettier": "error"}...Now we want to extend our ESLint rules to include prettier rules:
现在，我们想扩展我们的ESLint规则，使其包含更漂亮的规则：
npm i --save-dev eslint-config-prettierand add some extends to your eslint config:
并将一些扩展添加到您的eslint配置中：
...extends: [ "eslint:recommended", "plugin:react/recommended", "prettier", "plugin:prettier/recommended"]...Let’s add some more configurations to it. You should do this in order to avoid mismatches between default Prettier rules and your ESLint rules, like the one I have now:
让我们为其添加更多配置 。 您应该这样做，以避免默认的Prettier规则与您的ESLint规则不匹配，就像我现在所拥有的那样：
Prettier borrows ESLint’s override format. This allows you to apply configuration to specific files.
漂亮的借用了ESLint的替代格式 。 这使您可以将配置应用于特定文件。
You can now create a config file for it in the form of a .js file.
您现在可以以.js文件的形式为其创建配置文件。
nano prettier.config.jsNow, paste in that file:
现在，粘贴该文件：
module.exports = { printWidth: 80, tabWidth: 2, semi: true, singleQuote: true, bracketSpacing: true};Now when you press save, you see your code being automatically formatted. Isn’t that way prettier? Pun very much intended.
现在，当您按保存时，您会看到代码被自动格式化。 这样不是更漂亮吗？ 双关语非常有意。
My package.json looks like this:
我的package.json看起来像这样：
{ "name": "post", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "build": "webpack --mode production", "dev": "webpack-dev-server --mode development --open" }, "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-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.4", "webpack-md5-hash": "0.0.6" }}Now that we have this all set up, let’s quickly recap: ESLint watches your code for errors, and Prettier is a style formatting tool. ESLint has many more ways to catch errors, while Prettier formats your code nicely.
现在我们已经完成了所有的设置，让我们快速回顾一下：ESLint监视您的代码中是否有错误，而Prettier是一种样式格式化工具。 ESLint具有更多捕获错误的方法，而Prettier可以很好地格式化代码。
// 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].[chunkhash].js' }, 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() ]};问题：Prettier不会自动格式化Visual Studio Code中的代码 (Issue: Prettier does not automatically format code in Visual Studio Code)
A few people have pointed out that VS Code does not work with Prettier.
少数人指出VS Code不适用于Prettier。
If your Prettier plugin does not format the code automatically on save, you ca fix it by adding this code to VS Code settings:
如果您的Prettier插件没有在保存时自动格式化代码，则可以通过将以下代码添加到VS Code设置中进行修复：
"[javascript]": { "editor.formatOnSave": true }as described here.
作为描述在这里 。
将ESLint加载程序添加到管道中 (Adding ESLint loader to your pipeline)
Since ESLint is configured in the project, it will also complain in your terminal once you run dev server.
由于ESLint是在项目中配置的，因此一旦运行dev服务器，它也会在您的终端中发出投诉。
Note: Although it is possible to do, at this moment I do not recommend using ESLint as a loader. It will break source map setup, which I described in greater details in my previous article How to solve Webpack problems. The Practical Case. I will show how to set it up here, in case the guys have already fixed the bug they had.
注意 ：尽管可以这样做，但目前不建议将ESLint用作加载程序。 它将破坏源映射的设置，我在上一篇文章“ 如何解决Webpack问题”中对此进行了更详细的描述。 实际案例。 如果这些家伙已经修复了他们的错误，我将在这里展示如何设置它。
Webpack has its own ESLint loader.
Webpack有其自己的ESLint加载程序 。
npm install eslint-loader --save-devYou have to add ESLint to rules. When using with transpiling loaders (like babel-loader), make sure they are in the correct order (bottom to top). Otherwise, the files will be checked after being processed by babel-loader
您必须将ESLint添加到规则中。 与转载式装载机(如babel-loader )一起使用时，请确保它们的顺序正确(从下到上)。 否则，文件将由babel-loader处理后进行检查
...module: { rules: [ { test: /\.js$/, exclude: /node_modules/, use: [{ loader: "babel-loader" }, { loader: "eslint-loader" }] } ]},...Here are some possible issues you might have:
这是您可能遇到的一些问题：
- add an unused variable to your index file 将未使用的变量添加到索引文件
If you stumble upon this error (no-unused-vars), it is pretty well explained in this issue on GitHub and here.
如果您偶然发现此错误(no-unused-vars)，则可以在GitHub和此处的 本期中对此进行了很好的解释。
We can solve this problem by adding some rules, explained here and here.
我们可以通过添加一些规则来解决此问题，这些规则在此处和此处进行了说明。
As you might have noticed, you get the no-unused-vars error here. You need to make it a warning and not a error, because this way it way easier to do fast development. You need to add a new rule to your ESLint so that you do not get the default error.
您可能已经注意到，您在这里遇到了no-unused-vars错误。 您需要使其成为警告而不是错误，因为这样可以更轻松地进行快速开发。 您需要向ESLint添加新规则，以免出现默认错误。
You can read about this setup more here and here.
...semi: ['error', 'always'],'no-unused-vars': [ 'warn', { vars: 'all', args: 'none', ignoreRestSiblings: false }],'prettier/prettier': 'error'}...This way we will get pretty error and warning messages.
这样，我们将得到漂亮的错误和警告消息。
I like the idea of having an auto fix feature, but let’s be clear: I am not the biggest fan of having things magically change. To avoid that situation we can commit autofix for now.
我喜欢具有自动修复功能的想法，但请清楚一点：我不是对事物进行神奇更改的最大粉丝。 为了避免这种情况，我们现在可以提交自动修复。
预提交钩 (Pre commit hook)
People are usually very careful when it comes to using Git tools. But I assure you, this one is very easy and straightforward. Pre commit hooks with Prettier are used so that teams have consistent codebase style across every project file, and nobody can commit unstyled code. Setup Git integration for your project like this:
人们在使用Git工具时通常非常小心。 但我向您保证，这一步骤非常简单明了。 使用带有Prettier的Pre commit钩子，以便团队在每个项目文件中具有一致的代码库样式，并且没有人可以提交未样式化的代码。 为您的项目设置Git集成，如下所示：
git initgit add .nano .gitignore (add your node_modules there)git commit -m "First commit"git remote add origin your origingit push -u origin masterHere are some great articles on git hooks and using Prettier.
这是一些有关git hook和使用Prettier的精彩文章。
For people who say you can only do it locally — no, that’s not true!
对于那些说您只能在本地进行的人-不，那不是真的！
You can do it using lint-stage tool from this repository by Andrey Okonetchnikov.
您可以使用不起毛的阶段工具从做这个库由安德烈Okonetchnikov 。
添加propTypes (Adding propTypes)
Let’s create a new component in our app. So far, our index.js looks like this:
让我们在应用程序中创建一个新组件。 到目前为止，我们的index.js看起来像这样：
import React from 'react';import { render } from 'react-dom';class App extends React.Component { render() { return <div>Hello</div>; }}render(<App />, document.getElementById('app'));We will create a new component called Hello.js for demo purposes.
为了演示目的，我们将创建一个名为Hello.js的新组件。
import React from 'react';class Hello extends React.Component { render() { return <div>{this.props.hello}</div>; }}export default Hello;Now import it to your index.js file:
现在将其导入到您的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'));We were supposed to see the element, but ESLint complains:
我们应该看到该元素，但是ESLint抱怨：
Error: [eslint] ‘hello’ is missing in props validation (react/prop-types)
错误：道具验证中缺少[eslint]'hello'(React/道具类型)
In React v16, it is mandatory to add prop types in order to avoid type confusion. You can read more about it here.
在React v16中，为了避免类型混淆，必须添加prop类型 。 您可以在此处了解更多信息。
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;热模块更换 (Hot module replacement)
Now that you have your code checked, it is time to add more components to your React app. So far you only have two, but in most cases you have dozens.
现在您已经检查了代码，是时候向React应用程序添加更多组件了。 到目前为止，您只有两个，但是在大多数情况下，您只有几十个。
Of course, recompiling the entire app on refresh every time you change something in your project is not an option. You need a faster way to do it.
当然，每次更改项目中的内容时都不能在刷新时重新编译整个应用程序。 您需要一种更快的方法。
So let’s add hot module replacement, aka HMR. In the documentation, it is described as:
因此，让我们添加热模块替换(又名HMR)。 在文档中 ，它描述为：
Hot Module Replacement (HMR) exchanges, adds, or removes modules while an application is running, without a full reload. This can significantly speed up development in a few ways:
热模块替换(HMR)在应用程序运行时交换，添加或删除模块 ，而无需完全重新加载。 这可以通过以下几种方式显着加快开发速度：
Retain application state which is lost during a full reload.
保留在完全重载期间丢失的应用程序状态。
Save valuable development time by only updating what’s changed.
仅更新更改内容即可节省宝贵的开发时间。
Tweak styling faster — almost comparable to changing styles in the browser’s debugger.
调整样式的速度更快-几乎可以与浏览器调试器中样式的更改相提并论。
I am not going into the technicalities of how it works here: that would be the subject of a separate post. But here is how to configure it:
我不打算讨论它在这里如何工作的技术性：那将是一个单独帖子的主题。 但是这里是如何配置它：
...output: { path: path.resolve(__dirname, 'dist'), filename: '[name].[chunkhash].js'},devServer: { contentBase: './dist', hot: true},module: { rules: [...解决HMR的小问题 (Solving small issues with HMR)
We had to replace chunkhash with hash, because evidently webpack has fixed that issue since the last time. Now we have hot module replacement working!
我们必须用hash替换chunkhash，因为自上次以来，显然webpack已解决了该问题。 现在我们可以进行热模块更换了！
...module.exports = { entry: { main: './src/index.js' }, output: { path: path.resolve(__dirname, 'dist'), filename: '[name].[hash].js' }, devServer: { contentBase: './dist',...解决错误 (Solving bugs)
If we run the dev script here:
如果我们在此处运行开发脚本：
then use tips from this issue to fix it.
然后使用此问题的技巧进行修复。
Next, add — hot flag to dev script in package.json:
接下来，在package.json中添加—热标记到开发脚本：
..."scripts": { "build": "webpack --mode production", "dev": "webpack-dev-server --hot"}...源图： (Source maps:)
As I mentioned above, source maps will not work together with ESLint loader. I have filed an issue here.
如上所述， 源映射无法与ESLint加载器一起使用。 我在这里提了一个问题。
Usually, you would not want them in your project anyway (since you want to debug your project from ESLint error messages). They are also known for making HMR slower.
通常，您无论如何都不希望它们出现在您的项目中(因为您想从ESLint错误消息中调试项目)。 它们还以降低HMR速度而闻名。
You can read about it more here and here.
But if you want source maps anyway, the easiest way to add them is through the devtools option.
但是，无论如何，如果想要源映射，添加它们的最简单方法是通过devtools选项。
...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 }, ...Note: source maps will not work until you specify the environment the right way. You can read about my process of debugging here. Below I will provide you with a spoiler and explanation of how I solved that issue.
注意：在您以正确的方式指定环境之前，源地图将无法工作。 您可以在此处阅读有关我的调试过程的信息 。 下面，我将为您提供扰流器并解释如何解决该问题。
If we now go and create an error in our code, this will be displayed in the console and will point us to the right place:
如果现在我们在代码中创建错误，它将显示在控制台中，并将我们指向正确的位置：
…or so we thought. But nope:
……所以我们认为。 但没有：
You need to change the environment variable like this:
您需要像这样更改环境变量：
..."main": "index.js","scripts": { "build": "webpack --mode=production", "start": "NODE_ENV=development webpack-dev-server --mode=development --hot"},"author": ""...webpack.config.js
webpack.config.js
...devtool: 'inline-source-map',devServer: { contentBase: './dist', open: true}...Now it works!
现在可以了！
Now you have successfully setup the development environment for your project!
现在，您已经为项目成功设置了开发环境！
Lets recap:
让我们回顾一下：
- We set up webpack 我们设置了webpack
- We created our first React component 我们创建了第一个React组件
- We included ESLint to check the code for mistakes 我们包含了ESLint来检查代码是否有错误
- We set up hot module replacement 我们设置热模块更换
- We (maybe) added source maps 我们(也许)添加了源地图
Note: since a lot of npm dependencies might change by the time you read this, the same config might not work for you. I kindly ask you to leave your errors in the comments below so that I can edit it later.
注意 ：由于许多npm依赖项在您阅读本文时可能会更改，因此相同的配置可能对您不起作用。 恳请您在下面的评论中保留您的错误，以便稍后进行编辑。
Please, Subscribe and Clap for this article! Thanks!
请订阅并拍击本文！ 谢谢！
More materials:
更多材料：
SurviveJS — WebpackAfter weeks failing at configuring webpack, I stumbled upon SurviveJS book while looking for yet another tutorial…survivejs.comA Beginner’s Guide to Webpack 4 and Module Bundling — SitePointWebpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also…www.sitepoint.com
SurviveJS — Webpack 在配置Webpack数周后失败后，我偶然发现了SurviveJS的书，同时又寻找了另一篇教程…… Survivive.com Webpack 4和模块捆绑的初学者指南— SitePoint Webpack是一个模块捆绑器。 它的主要目的是捆绑JavaScript文件以供在浏览器中使用，但它也是…… www.sitepoint.com
翻译自: https://www.freecodecamp.org/news/how-to-develop-react-js-apps-fast-using-webpack-4-3d772db957e4/
1650
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
