本文共 31553 字，大约阅读时间需要 105 分钟。
webpack 调试
by Margarita Obraztsova
玛格丽塔(Margarita Obraztsova)
I would say that this was quite a journey. I knew that Webpack was not easy to configure: there are many parts with many options, there’s npm hell, and they change with new releases. No wonder it can easily become a troublesome task to debug when something does not go as you expected (that is, not as it is in the docs).
我会说这是一段漫长的旅程。 我知道Webpack并不容易配置：很多部分都有很多选项，npm地狱，并且随着新版本的发布而改变。 难怪当某些事情没有按您期望的那样进行调试时 (很可能不是文档中的情况) ，调试很容易成为麻烦的任务 。
My debugging journey started with the following setup:
我的调试过程始于以下设置：
webpack.config.js
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
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
.babelrc
{ "presets": ["env", "react"]} .eslintrc.js
.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
prettier.config.js
// .prettierrc.js
module.exports = { printWidth: 80, tabWidth: 2, semi: true, singleQuote: true, bracketSpacing: true}; And in the src/ folder:
并在src /文件夹中：
index.html
index.html
index.js
index.js
import React from 'react';import { render } from 'react-dom';import Hello from './Hello'; class App extends React.Component { render() { return ( Hello.js
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;
This was the overall project structure:
这是整个项目的结构：
As you can see, I set up the environment, the ESLinting, and so on. I created everything so that I could start coding and add my new components to my shiny new component library.
如您所见，我设置了环境，ESLinting等。 我创建了所有内容，以便可以开始编码并将新组件添加到闪亮的新组件库中。
But what if I got an error? Let’s go screw something up.
但是，如果出现错误怎么办？ 让我们去搞砸。
If we try to backtrace the origin of the error from our Google Chrome browser console, this will be very difficult for us. We would stumble upon something like this:
如果我们尝试从Google Chrome浏览器控制台回溯错误的根源，这对我们来说将非常困难。 我们会偶然发现这样的事情：
The source maps are not configured!
源映射未配置！
I want it to point to a file Hello.js and not to a bundled file, kinda like this guy did .
我希望它指向文件Hello.js而不是捆绑文件，就像这个家伙在所做的那样。
Or so I thought. So I tried to set up the source maps as by adding .
还是我想。 因此，我尝试通过添加来设置的源映射。
When webpack bundles your source code, it can become difficult to track down errors and warnings to their original location. For example, if you bundle three source files (
a.js,b.js, andc.js) into one bundle (bundle.js) and one of the source files contains an error, the stack trace will simply point tobundle.js. This isn't always helpful as you probably want to know exactly which source file the error came from.当webpack捆绑您的源代码时，很难将错误和警告跟踪到其原始位置。 例如，如果将三个源文件(
a.js，b.js和c.js)捆绑到一个捆绑包(bundle.js)中，并且其中一个源文件包含错误，则堆栈跟踪将仅指向bundle.js。 这并不总是有用的，因为您可能想确切知道错误来自哪个源文件。
In order to make it easier to track down errors and warnings, JavaScript offers , which maps your compiled code back to your original source code. If an error originates from
b.js, the source map will tell you exactly that. ()为了使查找错误和警告更加容易，JavaScript提供了 ，该将编译后的代码映射回原始源代码。 如果错误源自
b.js，则源映射将准确告诉您。 ( )
So I naively assumed this would work in my webpack.config.js:
所以我天真地认为这可以在我的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 }, ... and package.json
和package.json
..."scripts": { "build": "webpack --mode production", "dev": "webpack-dev-server --mode development"}... You have to add a development flag when doing it, otherwise it won’t work as the docs say. Yet, even with the suggested value, the source map did not act as I wanted it to.
您必须在执行操作时添加一个开发标志，否则将无法正常工作。 但是，即使具有建议的值，源映射也无法按我希望的方式运行。
If you read from SurviveJS, which you should, you will see.
如果您应该从SurviveJS阅读 ，您将会看到。
After I tried every option from it, I resorted to GitHub issue hunting.
在尝试了所有选项之后，我求助于GitHub问题搜寻。
Trying all the suggestions in GitHub issues did not help me.
尝试GitHub问题中的所有建议对我没有帮助。
At some point I thought something was wrong with webpack-dev-server. And it turned out that the webpack-dev-server has been in maintenance mode for a few months already.
在某些时候，我认为webpack-dev-server出了点问题。 事实证明，webpack-dev-server处于维护模式已经有几个月了。
I discovered that after I stumbled upon where they recommend to use webpack-serve instead of webpack-dev-server.
在偶然发现后，我发现他们建议使用webpack-serve而不是webpack-dev-server。
Honestly, that was the first time I had heard about an alternative called webpack-serve. The docs did not look promising, either. But I still decided to give it a shot.
老实说，那是我第一次听说名为webpack-serve的替代方法。 这些文档也不是很有希望。 但是我还是决定试一试。
npm install webpack-serve --save-dev
I created serve.config.js
我创建了serve.config.js
const serve = require('webpack-serve'); const config = require('./webpack.config.js'); serve({ config }); I replaced webpack-dev-server with webpack serve in my package.json.
我在package.json 中将webpack-dev-server替换为webpack serve 。
But trying webpack-serve didn’t solve it either.
但是尝试使用webpack-serve还是不能解决问题。
So at this point I felt like I had used every suggestion I could find on GitHub:
所以在这一点上，我觉得我已经使用了我可以在GitHub上找到的所有建议：
: this issue suggests that devtool: 'source-map' should work out of the box, but this was not the case for me
：此问题表明devtool: 'source-map'应该开箱即用，但对我而言并非如此
: adding devtoolModuleFilenameTemplate: info =>'file://' + path.resolve(info.absoluteResourcePath).replace(/\\/g, '/') to my output config did not help much. But instead of client.js, it showed me index.js.
：将devtoolModuleFilenameTemplate: info =>'file://' + path.resolve(info.absoluteResourcePath).replace(/\\/g, ' /')添加到我的输出配置中没有帮助许多。 但是它没有显示client.js，而是显示了index.js。
: this one is not an accurate description of my issue, so trying the methods here did not seem to help me
：这不是我的问题的准确描述，因此尝试此处的方法似乎无济于事
I tried to use webpack.SourceMapDevToolPlugin but it didn’t work with my setup, even when I deleted devtools or set them to false
我尝试使用webpack.SourceMapDevToolPlugin但是即使我删除了devtools或将它们设置为false，它也无法在我的设置中使用
I tried the source-map-support package as well, but no luck there. I have a similar situation as seen .
我也尝试了source-map-support软件包，但是没有运气。 我所看到类似的情况 。
It took me forever to configure source maps, so I created an on StackOverflow.
我花了很多时间来配置源映射，所以我在StackOverflow上创建了一个 。
Debugging webpack config is usually a cumbersome task: the best way to go about it is to create a config from a scratch. If something from the documentation does not work as expected, it might be a good idea to try to find a similar issue on a branch, or create your own issue. I thought so, anyway.
调试webpack配置通常是一项繁琐的任务：最好的方法是从头开始创建配置。 如果文档中的某些内容无法按预期工作，则最好在分支上查找类似的问题，或者创建自己的问题。 我还是这样想的。
The first guy who answered my issue was really trying to help. He shared his own working config. Even helped me by creating .
第一个回答我的问题的人确实是在尝试提供帮助。 他共享了自己的工作配置。 甚至通过创建帮助我。
The only problem here: why does his setup work? I mean, this is probably not magic, and there is some module incompatibility there. Sadly, I could not understand why my setup was not working:
这里唯一的问题： 为什么他的设置有效 ？ 我的意思是，这可能不是魔术，并且那里存在一些模块不兼容性。 可悲的是，我不明白为什么我的设置无法正常工作：
The thing is that he did it with the best intentions by restructuring the project his way.
问题是，他以自己的方式重组了项目，以最好的意图做到了。
This meant that I would have some more setup in the project and would have to change quite a few things. That might have been ok if I was doing a test setup, but I decided to do the gradual changes to the files to see where it was breaking.
这意味着我将在项目中进行更多设置，并且必须更改很多内容。 如果我正在进行测试设置，那可能没问题，但我决定对文件进行逐步更改，以查看其中断位置。
So let’s take a look at the differences between his Webpack and package.json and mine. Just for the record, I used a different repo in the question, so here is my and my setup.
因此，让我们看一下他的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
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"} }
I left them intact on purpose so that you can see my debugging attempts. Everything worked except for source maps. Below, I will share what he changed in my config — but it is of course better to check the full pull request .
我故意保留它们，以便您可以看到我的调试尝试。 除了源映射外，一切正常 。 下面，我将分享他在我的配置中所做的更改-但最好在检查完整的请求。
// 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
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" } }
As you can see, he deleted a bunch of modules and added mode inside of the config. And taking a look at the pull request, you can see that he also added some specific react-oriented HMR.
如您所见，他删除了一堆模块，并在配置中添加了模式。 看一下拉取请求，您可以看到他还添加了一些特定的面向React的HMR。
This helped the source maps work by sacrificing a lot of plugins, but there was no concrete explanation for why he did what he did. As a person who reads the docs, this was not very satisfying for me.
这通过牺牲许多插件来帮助源地图工作，但是没有具体解释他为什么这样做。 作为一个阅读文档的人，这对我来说并不十分令人满意。
Later, I took my initial webpack.connfig.js and started to add the changes step by step too see when the source maps finally started to work.
后来，我使用了最初的webpack.connfig.js并开始逐步添加更改，还可以查看源地图何时终于开始工作。
Change 1:
变更1：
- new CleanWebpackPlugin('dist', {}),+ new CleanWebpackPlugin('dist'), Change 2:
变更2：
I added webpack-dev-server to dependencies, not devDependencies:
我将webpack-dev-server添加到依赖项，而不是devDependencies：
...
},
"dependencies": { "webpack-dev-server": "^3.1.3"
}
}
...
Change 3:
变更3：
Next I removed some devServer settings:
接下来，我删除了一些devServer设置：
devServer: {- contentBase: './dist',+ hot: true,+ open: true }, Change 4:
变更4：
Let’s remove stylish:
让我们删除时尚：
...
},
devtool: 'inline-source-map', devServer: { hot: true, open: true }, ...
use: [ { loader: 'babel-loader' }, { loader: 'eslint-loader' } ]
....
Change 5:
变更5：
Let’s try to remove the WebpackMd5Hash hashing plugin now:
让我们尝试立即删除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(), ] };
Change 6:
变更6：
Now let’s try to remove some settings from HtmlWebpackPlugin:
现在，让我们尝试从HtmlWebpackPlugin中删除一些设置：
...
plugins: [ new CleanWebpackPlugin('dist'), new HtmlWebpackPlugin({ template: './src/index.html' })]}; ...
Change 7:
变更7：
As we can see in his code, he added some resolve options here. I personally do not understand why we need them here. And I couldn’t find the info in the docs, either.
正如我们在他的代码中看到的那样，他在此处添加了一些解析选项。 我个人不明白为什么我们在这里需要它们。 而且我也找不到文档中的信息。
...
resolve: { extensions: ['.js', '.jsx']},module: { ...
Change 8:
变更8：
Deleting output path:
删除输出路径：
...
entry: { main: './src/index.js' },output: { filename: '[name].js'},devtool: 'inline-source-map', ...
Change 9:
变更9：
Adding the hot module replacement plugin:
添加热模块更换插件：
...
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()]}; ...
Change 10:
变更10：
Adding — config to package.json:
添加—配置到package.json：
- "dev": "webpack-dev-server --mode development --open",+ "dev": "webpack-dev-server --config ./webpack.config.js",
Let’s make something clear: at this point I had almost re-written the config.
让我们澄清一下：在这一点上，我几乎重写了配置。
This is a massive issue, since we cannot just rewrite it every time something is not working!
这是一个大问题，因为我们不能每次都无法正常工作时重写它！
As a last resort, I went to check how create-react-app implements the source mapping. That was the right decision after all. This is the config of .
作为最后的手段，我去检查了create-react-app如何实现源映射。 毕竟，这是正确的决定。 这是的配置。
If we check how devtool is implemented there, we will see:
如果检查那里如何实现devtool ，我们将看到：
// You may want ‘eval’ instead if you prefer to see the compiled output in DevTools.
//如果您希望在DevTools中查看编译后的输出，则可能需要'eval'。
// See the discussion in
//请参阅的讨论
devtool: ‘cheap-module-source-map’
devtool：“便宜的模块-源-地图”
So this issue pointed me to another issue, found .
所以这个问题使我想到了另一个问题，可以找到。
// 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: { Changing the lines still did not work — yet! I learned that source map is a long-hanging issue.
更改线路仍然没有用，但是！ 我了解到源地图是一个长期存在的问题。
Every open source project has maintainers. So, in this case, it was definitely the right move to ask the guys right away.
每个开源项目都有维护者。 因此，在这种情况下，立即询问这些家伙绝对是正确的举动。
Although the trial and error method from Daniel did not really work out for me, I was pleasantly surprised by how mobile the maintainer team was.
尽管Daniel的反复试验方法对我而言并不是很有效，但维护团队的机动性使我感到惊喜。
So I created a repo with the setup you can see . Check out the second commit there.
所以我用您可以看到的设置创建了一个仓库。 在此处签出第二个提交。
To make it easier for you, here is my project webpack.js where I rolled back to my initial, cleaner setup:
为了让您更轻松，这是我的项目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() ]}; After checking my code, the maintainer created an .
在检查完我的代码后，维护人员创建了一个 。
Let’s recap what he included there:
让我们回顾一下他在其中包括的内容：
Setting the
modeoption设置
mode选项
First issue I’ve found is how the
modeoption was set. In the npm scripts the mode was set as:我发现的第一个问题是如何设置
mode选项。 在npm脚本中，模式设置为：
webpack --mode production
webpack-模式生产
The correct way would be:
正确的方法是：
webpack --mode=production
webpack --mode =生产
Final state of npm scripts looks like this to me:
在我看来，npm脚本的最终状态如下：
"scripts": {
“脚本”：{
"scripts": { "build": "webpack --mode=production",
“ scripts”：{ “ build”：“ webpack --mode = production”，
"scripts": { "build": "webpack --mode=production", "start": "webpack-dev-server --mode=development --hot"
“脚本”：{ “构建”：“ webpack --mode = production”， “开始”：“ webpack-dev-server --mode = development --hot”
"scripts": { "build": "webpack --mode=production", "start": "webpack-dev-server --mode=development --hot"}
“ scripts”：{ “ build”：“ webpack --mode = production”， “ start”：“ webpack-dev-server --mode = development --hot” }
I also changed
devtostartsince it's more standard and expected from other developers as a command. You can actually donpm start, without theruncommand ?我也将
dev更改为start因为它更加标准，并且期望其他开发人员作为命令。 您实际上可以执行npm start，而无需run命令吗？
...
"scripts": { "build": "webpack --mode production", "dev": "webpack-dev-server --mode=development --hot"}, ...
Next he suggested the following:
接下来，他提出以下建议：
devtool for source maps
用于源地图的devtool
I always recommend the
inline-source-mapoption, it's the most straight forward and it's included in the bundle itself as a comment at the end of it.我总是建议使用
inline-source-map选项，它是最简单的方法，并且作为注释的末尾包含在捆绑包中。
module.exports = {
module.exports = {
module.exports = { + devtool: 'inline-source-map',
module.exports = { + devtool：'inline-source-map'，
module.exports = { + devtool: 'inline-source-map', // rest of your config
module.exports = { + devtool：'inline-source-map'， //其他配置
module.exports = { + devtool: 'inline-source-map', // rest of your config}
module.exports = { + devtool：'inline-source-map'， //其余配置 }
I also recommend creating a separate object and populating this only on development:
我还建议创建一个单独的对象，并仅在开发时填充它：
command
命令
webpack-dev-server --mode=development NODE_ENV=development
webpack-dev-server --mode = development NODE_ENV = development
webpack.config.js
webpack.config.js
const webpackConfig = {}
const webpackConfig = {}
if (process.env.NODE_ENV === 'development') {
如果(process.env.NODE_ENV ==='开发'){
if (process.env.NODE_ENV === 'development') { webpackConfig.devtool = 'inline-source-map'
如果(process.env.NODE_ENV ==='开发'){ webpackConfig.devtool ='inline-source-map'
if (process.env.NODE_ENV === 'development') { webpackConfig.devtool = 'inline-source-map'}
如果(process.env.NODE_ENV ==='开发'){ webpackConfig.devtool ='inline-source-map' }
This way you make sure the bundle on production doesn’t get affected by this.
这样，您可以确保生产中的捆绑包不受此影响。
Then he suggested to removing ESLint from loaders:
然后，他建议从加载程序中删除ESLint：
Linting and developer experience
整理和开发人员经验
Honestly, I would delete
eslintas a loader, it's super spammy and it messes with the development flow. I prefer to add a precommit githook to check this.老实说，我将
eslint删除为加载程序，这是超级垃圾邮件，并且会eslint开发流程。 我更喜欢添加一个预提交的githook来进行检查。
This is super easy by adding a script like this:
通过添加以下脚本，这非常容易：
"scripts": {
“脚本”：{
"scripts": { + "lint": "eslint ./src/**/*.js"
“脚本”：{ +“ lint”：“ eslint ./src/**/*.js”
"scripts": { + "lint": "eslint ./src/**/*.js" "build": "webpack --mode=production",
“ scripts”：{ +“ lint”：“ eslint ./src/**/*.js” “ build”：“ webpack --mode = production”，
"scripts": { + "lint": "eslint ./src/**/*.js" "build": "webpack --mode=production", "start": "webpack-dev-server --mode=development --hot"
“脚本”：{ +“ lint”：“ eslint ./src/**/*.js” “ build”：“ webpack --mode = production”， “ start”：“ webpack-dev-server --mode =发展-热门”
"scripts": { + "lint": "eslint ./src/**/*.js" "build": "webpack --mode=production", "start": "webpack-dev-server --mode=development --hot"}
“脚本”：{ +“ lint”：“ eslint ./src/**/*.js” “ build”：“ webpack --mode = production”， “ start”：“ webpack-dev-server --mode =开发--hot“ }
And then combining it with husky.
然后将其与沙哑相结合。
and adding it to scripts:
并将其添加到脚本中：
...
"scripts": { "lint": "eslint ./src/**/*.js",
"build": "webpack --mode production",
"dev": "webpack-dev-server --mode=development --hot"
},
...
I made a mistake in src/Hello.js on purpose to see how source maps worked this time.
我在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; The issue was EsLint. But after specifying the modes correctly and removing the eslint-loader, source maps worked fine!
问题是EsLint。 但是在正确指定了模式并删除了eslint-loader之后，源映射工作正常！
Following the example the maintainer gave me, I updated my Webpack to:
按照维护者给我的示例，我将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() ]}; and my package JSON to:
和我的包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"} }
Finally source maps worked!
终于，源地图成功了！
Source maps has been the subject of multiple discussions and bugs since 2016, as you can see .
自2016源地图已经多次讨论和错误的对象，你可以看到 。
Webapack needs help with audit!
Webapack需要审核方面的帮助！
After finding this bug, I submitted an to the ESLint loader package.
找到此错误后，我向ESLint加载程序包提交了一个 。
When it comes to checking source maps quality, we can use .
在检查源地图质量时，我们可以使用 。
In case if you stumble upon an issue with Webpack, do not panic! Follow these steps:
如果您偶然发现Webpack的问题，请不要惊慌！ 跟着这些步骤：
In this article, I have provided you with my configuration file and the process I used to configure it step by step.
在本文中，我为您提供了配置文件以及逐步配置它的过程。
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!
请订阅并拍击本文！ 谢谢！
翻译自:
webpack 调试
转载地址：http://fikzd.baihongyu.com/