我可以让 Webpack 捆绑但不缩小以进行调试吗？

Question

似乎是一个真正愚蠢的问题，必须在某个地方找到答案，但我已经搜索了几个小时无济于事。我是 ReactJS 和使用 Webpack 构建的新手，通常构建配置。我正在使用 Webpack 链接和捆绑我的整个项目，包括 ReactJS。它工作得很好，但我想不出任何办法让捆绑包不缩小，以便在出现问题时进行调试。

这是我的 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 包？

Answer 1

当你对 webpack 的 cli 使用 -p 标志时，你是在告诉 webpack 使用 UglifyJSPlugin (behind the scenes)

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

var webpack = require('webpack');

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

此外，您可以看到我已将自定义选项传递给 UglifyJsPlugin（仅对应于 UglifyJs 的compression options）。

Answer 2

你应该添加到你的 webpack.build.js 文件中

devtool: 'inline-source-map',

Answer 3

这是一个迟到的答案，但可能对其他人有帮助。

当您设置mode: 'development' 时，您将获得一个非缩小包。 Webpack 默认使用 terser 插件在生产模式下进行 javascript 压缩，即使您没有明确使用它。

另外对于调试 devtool 选项也是必须的。

举个例子：

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

Answer 4

为什么不简单地使用：

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