首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >我可以让Webpack捆绑但不缩小调试?

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

Stack Overflow用户
提问于 2016-12-21 04:58:21
回答 4查看 9.9K关注 0票数 15

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

这是我的Webpack配置:

代码语言:javascript
复制
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;

我使用npm run devnpm run build运行捆绑执行,它们从package.json中调用以下内容:

代码语言:javascript
复制
{
  /* 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"
  }
}

我需要改变什么才能让我的Webpack处决出非缩小的JavaScript捆绑呢?

EN

回答 4

Stack Overflow用户

发布于 2021-12-30 20:36:40

为什么不简单地使用:

代码语言:javascript
复制
module: {
   // ....
},
optimization: {
   minimize: false
},
票数 8
EN

Stack Overflow用户

发布于 2016-12-21 05:26:05

当您在webpack的cli中使用-p标志时,您是在告诉webpack使用UglifyJSPlugin (幕后)

因此,我将有一个单独的构建任务,它在没有-p标志的情况下运行webpack,而是在您的配置中传递以下内容。

代码语言:javascript
复制
var webpack = require('webpack');

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

此外,您可以看到,我已经向UglifyJsPlugin传递了一个自定义选项(它只对应UglifyJs的压缩选项)。

票数 4
EN

Stack Overflow用户

发布于 2021-09-24 23:42:39

这是一个迟来的答案,但也许能帮助到别人。

当您设置mode: 'development'时,您将得到一个不可缩小的包。Webpack在生产模式中默认使用terser插件来缩小javascript,即使您没有显式地使用它。

此外,对于调试开发工具选项也是必须的。

例如:

代码语言:javascript
复制
const config = {
...
mode: development,
devtool: 'source-map',
...
};
票数 3
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/41255380

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档