Question

我正在尝试让Webpack在通过Yarn运行时缩小我的Javascript代码。我相信我已经正确设置了所有内容，但是Javascript并没有被缩小。

我已经构建了一个docker box来重现这个问题：https://github.com/Danack/ReactTest（可能在Windows上不起作用）

我已经测试过Uglify代码正在通过手动调用Uglify.minify（）来缩小测试文件，并且它是。

这是我的Webpack配置文件：

var webpack = require("webpack");
var path = require("path");

// This is just to test whether uglify is working.
var UglifyJS = require('uglify-js');
var fs = require('fs');
var result = UglifyJS.minify('./src/compress_test.js', {
  mangle: true,
  compress: {
    sequences: true,
    dead_code: true,
    conditionals: true,
    booleans: true,
    unused: true,
    if_return: true,
    join_vars: true,
    drop_console: true
  }
});
fs.writeFileSync('./uglify_test/manual.min.js', result.code);

module.exports = {

  entry: "./src/compress_test.js",
  devtool: "source-map",

  output: {
    path: path.resolve('./uglify_test'),
    filename: "[name].js"
  },

  plugins: [
    new webpack.optimize.UglifyJsPlugin({
      mangle: true,
      compress: {
        sequences: true,
        dead_code: true,
        conditionals: true,
        booleans: true,
        unused: true,
        if_return: true,
        join_vars: true,
        drop_console: true
      }
    })
  ]
};

构建项目webpack -d --colors --watch --config ./webpack.config.js或npm run dev:build

我设置了一个简单的Javascript文件，该文件具有长变量名称，以便于查看JS是否缩小或不变。

// compress_test.js
function really_long_test_function_name(some_really_long_param_name_1, some_really_long_param_name_2) {


  var foo_really_long_var_name_1 = some_really_long_param_name_1 + "asdjpajdpoadpsapodjpasojdpoajpdoaspdpasjd";
  var foo_really_long_var_name_2 = some_really_long_param_name_2 + "asdjpajdpoadpsapodjpasojdpoajpdoaspdpasjd";

  var foo_really_long_var_name_3 = foo_really_long_var_name_1 + foo_really_long_var_name_2;
  var foo_really_long_var_name_4 = foo_really_long_var_name_1 + foo_really_long_var_name_3;
  var foo_really_long_var_name_5 = foo_really_long_var_name_1 + foo_really_long_var_name_4;
  var foo_really_long_var_name_6 = foo_really_long_var_name_1 + foo_really_long_var_name_5;
  var foo_really_long_var_name_7 = foo_really_long_var_name_1 + foo_really_long_var_name_6;
  var foo_really_long_var_name_8 = foo_really_long_var_name_1 + foo_really_long_var_name_7;
  var foo_really_long_var_name_9 = foo_really_long_var_name_1 + foo_really_long_var_name_8;


  return foo_really_long_var_name_9.length;
}

通过手动调用Uglify生成的javascript很好地缩小了。

// manual.min.js
function really_long_test_function_name(a,p){var d=a+"asdjpajdpoadpsapodjpasojdpoajpdoaspdpasjd";return(d+(d+(d+(d+(d+(d+(d+(p+"asdjpajdpoadpsapodjpasojdpoajpdoaspdpasjd")))))))).length}

Webpack构建的javascript输出不是：

!function(l){function _(n){if(a[n])return a[n].exports;var o=a[n]={i:n,l:!1,exports:{}};return l[n].call(o.exports,o,o.exports,_),o.l=!0,o.exports}var a={};_.m=l,_.c=a,_.i=function(l){return l},_.d=function(l,a,n){_.o(l,a)||Object.defineProperty(l,a,{configurable:!1,enumerable:!0,get:n})},_.n=function(l){var a=l&&l.__esModule?function(){return l.default}:function(){return l};return _.d(a,"a",a),a},_.o=function(l,_){return Object.prototype.hasOwnProperty.call(l,_)},_.p="",_(_.s=0)}([/*!******************************!*\
  !*** ./src/compress_test.js ***!
  \******************************/
function(module,exports){eval('\n\nfunction really_long_test_function_name(some_really_long_param_name_1, some_really_long_param_name_2) {\n\n\n  var foo_really_long_var_name_1 = some_really_long_param_name_1 + "asdjpajdpoadpsapodjpasojdpoajpdoaspdpasjd";\n  var foo_really_long_var_name_2 = some_really_long_param_name_2 + "asdjpajdpoadpsapodjpasojdpoajpdoaspdpasjd";\n\n  var foo_really_long_var_name_3 = foo_really_long_var_name_1 + foo_really_long_var_name_2;\n  var foo_really_long_var_name_4 = foo_really_long_var_name_1 + foo_really_long_var_name_3;\n  var foo_really_long_var_name_5 = foo_really_long_var_name_1 + foo_really_long_var_name_4;\n  var foo_really_long_var_name_6 = foo_really_long_var_name_1 + foo_really_long_var_name_5;\n  var foo_really_long_var_name_7 = foo_really_long_var_name_1 + foo_really_long_var_name_6;\n  var foo_really_long_var_name_8 = foo_really_long_var_name_1 + foo_really_long_var_name_7;\n  var foo_really_long_var_name_9 = foo_really_long_var_name_1 + foo_really_long_var_name_8;\n\n\n  return foo_really_long_var_name_9.length;\n}\n\n\n\n\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjoz **** SOURCE_MAPPING_NOT_SHOWN_HERE***')}]);

长变量名仍在那里。

我需要做些什么才能让webpack真正缩小它输出的Javascript？

如果重要，我使用的是Yarn 0.23.4和Node 7.10.0

Answer 1

您使用-d。它是--debug --devtool eval-cheap-module-source-map --output-pathinfo

的捷径

这部分 - devtool eval-cheap-module-source-map 在配置中重写你的devtool并离开

original source (lines only)

Answer 2

如果您使用较新版本的uglifyjs-webpack-plugin，那么您可以使用下面的代码插件设置，它应该正常工作。关于uglify选项，这里有一些小的改动：

new UglifyJsPlugin({ 
            uglifyOptions: {
                mangle: true,
                output: {
                    comments: false
                }
            },
            sourceMap: true,
            exclude: [/\.min\.js$/gi]
       })

Answer 3

您需要uglifyjs bundled手动添加webpack。

在构建生产时，您应该只需要缩小，当您在生产模式下运行webpack时，将自动应用缩小，即：

webpack -p

或

webpack --optimize-minimize --define process.env.NODE_ENV="'production'"

有关详细信息，请访问此网站：https://webpack.js.org/guides/production-build/

Answer 4

看起来您正在尝试将uglify与watch标志一起使用，该标志旨在用于开发。

正如您所看到的，它将您的代码包装在eval语句中，而且多个包装器正在弄乱uglification进程。我还怀疑它可能会故意保持源代码不被调整以用于调试目的。

从您的Dockerfile开始，您从包中运行此命令，这让我觉得您正在尝试将webpack用作生产中的捆绑器和文件服务器，这不是应该的用于。

通过获取您的确切配置和文件，我可以通过简单地声明一个看起来像这样的脚本来生成输出缩小文件没有问题：

"prod:build": "webpack"

由于您有dead_code: true和drop_console: true，您可能必须使用当前代码将这些设置为false，因为该方法永远不会被调用，我所做的就是用{ {1}}并将console.log设置为drop_console

false

构建的结果看起来像

console.log(really_long_test_function_name('a', 'b'))

运行!function(o){function n(t){if(r[t])return r[t].exports;var e=r[t]={i:t,l:!1,exports:{}};return o[t].call(e.exports,e,e.exports,n),e.l=!0,e.exports}var r={};n.m=o,n.c=r,n.i=function(o){return o},n.d=function(o,r,t){n.o(o,r)||Object.defineProperty(o,r,{configurable:!1,enumerable:!0,get:t})},n.n=function(o){var r=o&&o.__esModule?function(){return o.default}:function(){return o};return n.d(r,"a",r),r},n.o=function(o,n){return Object.prototype.hasOwnProperty.call(o,n)},n.p="",n(n.s=0)}([function(o,n){console.log(function(o,n){var r=o+"asdjpajdpoadpsapodjpasojdpoajpdoaspdpasjd";return(r+(r+(r+(r+(r+(r+(r+(n+"asdjpajdpoadpsapodjpasojdpoajpdoaspdpasjd")))))))).length}("a","b"))}]);%二进制文件会自动获取webpack。此外，不需要为插件指定webpack.config.js，因为它已经是默认值。

要恢复，请在没有mangle: true选项的情况下使用缩小进行正常的生产构建，并在docker中安装类似nginx的内容以便在生产中提供文件。

Answer 5

在您调用选项的代码中，添加：

new webpack.optimize.UglifyJsPlugin({
      mangle: true, { keep_fnames: false, screw_ie8: true },
      compress: true, { keep_fnames: false, screw_ie8: true }
})

我不知道您要设置的选项？你确定他们是webpack uglify选项吗？无论如何，希望这会有所帮助。

编辑：

试试这个：

const UglifyJsPlugin = require('webpack/lib/optimize/UglifyJsPlugin');

new UglifyJsPlugin({
        beautify: false,
        comments: false,
        ...
      }),

这将更直接地调用您的原始Uglify插件...尝试以前的设置选项。

Webpack UglifyJsPlugin没有缩小代码

5 个答案: