我可以让Webpack捆绑，但没有缩小调试？

8gsdolmq 于 2023-04-21 发布在 Webpack

关注(0)|答案(4)|浏览(172)

这似乎是一个非常愚蠢的问题，肯定在某个地方有答案，但我已经搜索了几个小时都没有结果。我是ReactJS的新手，用Webpack构建，一般来说构建配置。我使用Webpack链接和捆绑我的整个项目，包括ReactJS。它工作得很好，但我想不出任何方法来让bundle出来un-minified，这样我就可以在出现问题时调试问题。
下面是我的Webpack配置：

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 dev或npm run build运行捆绑执行，这将调用我的package.json中的以下内容：

{
  /* 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执行中获得 un-minified JavaScript bundle？

webpack

来源：https://stackoverflow.com/questions/41255380/can-i-get-webpack-to-bundle-but-without-minification-for-debugging

4条答案

按热度按时间

um6iljoc1#

为什么不简单地用途：

module: {
   // ....
},
optimization: {
   minimize: false
},

赞(0）回复(0）举报 2023-04-21

biswetbf2#

这是一个迟来的答案，但可能会帮助别人。
当你设置mode: 'development'时，你会得到一个非缩小的包。Webpack默认使用terser插件在生产模式下进行javascript缩小，即使你没有显式使用它。
此外，调试devtool选项是必须的。
例如：

const config = {
  // ...
  mode: 'development',
  devtool: 'source-map',
  // ...
};

赞(0）回复(0）举报 2023-04-21

bejyjqdl3#

当你为webpack的cli使用-p标志时，你是在告诉webpack使用UglifyJSPlugin（幕后）
因此，我会有一个单独的构建任务，它运行webpack而不带-p标志，并在配置中传递以下内容。

var webpack = require('webpack');

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

此外，您可以看到我已经向UglifyJsPlugin传递了一个自定义选项（它正好对应于UglifyJs的压缩选项）。

赞(0）回复(0）举报 2023-04-21

tzdcorbm4#

您应该在webpack.build.js文件中添加

devtool：'inline-source-map'，

赞(0）回复(0）举报 2023-04-21