blocks|key|341035|text|当您在webpack的cli中使用-p标志时，您是在告诉webpack使用UglifyJSPlugin+(幕后)|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|341036|因此，我将有一个单独的构建任务，它在没有-p标志的情况下运行webpack，而是在您的配置中传递以下内容。|341037|var+webpack+=+require('webpack');

module.exports+=+{
++plugins:+[
++++new+webpack.optimize.UglifyJsPlugin({
++++++options:+{
++++++++compress:+{drop_debugger:+false}
++++++}
++++})
++]
};|code-block|syntax|javascript|341038|此外，您可以看到，我已经向UglifyJsPlugin传递了一个自定义选项(它只对应UglifyJs的压缩选项)。|341039|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/webpack/webpack/blob/c87d3ec523542ba5b71d393bc60c724c66f3a976/bin/convert-argv.js#L444-L454|1|https://github.com/mishoo/UglifyJS2#compressor-options^0|11|E|1G|4|0|0|0|0|1F|4|1|0^^$0|@$1|2|3|4|5|6|7|Y|8|@$9|Z|A|10|B|C]]|D|@$9|11|A|12|1|13]]|E|$]]|$1|F|3|G|5|6|7|14|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|15|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|16|8|@]|D|@$9|17|A|18|1|19]]|E|$]]|$1|O|3|-4|5|6|7|1A|8|@]|D|@]|E|$]]]|P|$Q|$5|R|S|T|E|$U|V]]|W|$5|R|S|T|E|$U|X]]]]

When you use the -p flag for webpack's cli, you are telling webpack to use the <code>UglifyJSPlugin</code> <a href="https://github.com/webpack/webpack/blob/c87d3ec523542ba5b71d393bc60c724c66f3a976/bin/convert-argv.js#L444-L454" rel="nofollow noreferrer">(behind the scenes)</a>

So instead, I would have a separate build task that runs webpack without the -p flag and instead passes the following in your config instead. 

<pre><code>var webpack = require('webpack');

module.exports = {
 plugins: [
 new webpack.optimize.UglifyJsPlugin({
 options: {
 compress: {drop_debugger: false}
 }
 })
 ]
};
</code></pre>

Additionally, you can see that I've passed a custom option to the UglifyJsPlugin (which just corresponds to UglifyJs's <a href="https://github.com/mishoo/UglifyJS2#compressor-options" rel="nofollow noreferrer">compression options</a>).

blocks|key|341047|text|您应该添加到您的webpack.build.js文件|type|unstyled|depth|inlineStyleRanges|entityRanges|data|341048|开发工具：“内联源地图”，|offset|length|style|BOLD|341049|entityMap^0|0|0|D|0^^$0|@$1|2|3|4|5|6|7|J|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|K|8|@$D|L|E|M|F|G]]|9|@]|A|$]]|$1|H|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|I|$]]

You should add to your webpack.build.js file
devtool: 'inline-source-map',

blocks|key|1158662|text|这是一个迟来的答案，但也许能帮助到别人。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1158663|当您设置mode:+'development'时，您将得到一个不可缩小的包。Webpack在生产模式中默认使用terser插件来缩小javascript，即使您没有显式地使用它。|offset|length|style|CODE|1158664|此外，对于调试开发工具选项也是必须的。|1158665|例如：|1158666|const+config+=+{
...
mode:+development,
devtool:+'source-map',
...
};|code-block|syntax|javascript|1158667|entityMap^0|0|4|J|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|T|8|@$D|U|E|V|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|W|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|X|8|@]|9|@]|A|$]]|$1|L|3|M|5|N|7|Y|8|@]|9|@]|A|$O|P]]|$1|Q|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|R|$]]

It is a late answer but maybe helps someone else.
When you set <code>mode: 'development'</code> you will get a non minified bundle.
Webpack is using terser plugin by default for javascript minification in production mode even if you don't use it explicitly.
Also for debugging devtool option is a must.
As an example :
<pre class="lang-js prettyprint-override"><code>const config = {
...
mode: development,
devtool: 'source-map',
...
};
</code></pre>

blocks|key|1158736|text|为什么不简单地使用：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1158737|module:+{
+++//+....
},
optimization:+{
+++minimize:+false
},|code-block|syntax|javascript|1158738|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Why don't simply use:
<pre><code>module: {
 // ....
},
optimization: {
 minimize: false
},
</code></pre>

Seems like a truly stupid question that must have an answer somewhere, but I've searched for hours to no avail. I'm new to ReactJS and building with Webpack, build configs in general. I'm using Webpack to link and bundle my entire project, including ReactJS. It works great, but I cannot figure out any way to get the bundle to come out un-minified so that I can debug issues when they arise.

Here is my Webpack config:

<pre><code>var webpack = require('webpack');
var path = require('path');

var BUILD_DIR = path.resolve(__dirname, 'public/js');
var APP_DIR = path.resolve(__dirname, 'build-source/js');

var config = {
 entry: APP_DIR + '\\main.js',
 output: {
 path: BUILD_DIR,
 filename: 'build.js' // want this output file to end un-minified
 },
 module: {
 loaders: [
 {
 test: /\.jsx?/,
 include: APP_DIR,
 loader: 'babel'
 }
 ]
 }
};

module.exports = config;
</code></pre>

I run the bundling execution with either <code>npm run dev</code> or <code>npm run build</code> which call upon the following from my package.json:

<pre><code>{
 /* blah blah */,
 "scripts": {
 "start": "node ./bin/www",
 "dev": "webpack -d --watch",
 "build": "webpack -p"
 },
 "dependencies": {
 "babel-core": "^6.16.0",
 "babel-loader": "^6.2.5",
 "babel-preset-react": "^6.16.0",
 "body-parser": "~1.15.1",
 "cookie-parser": "~1.4.3",
 "debug": "~2.2.0",
 "express": "~4.13.4",
 "helmet": "^3.1.0",
 "morgan": "~1.7.0",
 "mysql": "^2.11.1",
 "querystring": "^0.2.0",
 "react": "^15.3.2",
 "react-dom": "^15.3.2",
 "request": "^2.75.0",
 "serve-favicon": "~2.3.0",
 "webpack": "^1.13.2"
 }
}
</code></pre>

What do I need to change to get un-minified JavaScript bundles out of my Webpack execution?

Can I get Webpack to bundle but without minification for debugging?

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

这似乎是一个非常愚蠢的问题，一定有答案，但我已经找了几个小时，但没有结果。我是ReactJS的新手，和Webpack一起建房子，一般都是信任的。我用Webpack链接和捆绑我的整个项目，包括ReactJS。它工作得很好，但我想不出任何方法让捆绑包不受限制地出现，这样我就可以在问题出现时进行调试。这是我的Webpack配...

问我可以让Webpack捆绑但不缩小调试？
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问我可以让Webpack捆绑但不缩小调试？EN