webpack不再缩小包

时间:2019-03-30 08:36:44

标签: node.js webpack minify bundling-and-minification

我正在编写一个npm模块,该模块通过node vs cli运行webpack编译器。我已经有一段时间没有测试过我的构建函数了,因为它正在运行,但是我最近运行了它,而且我似乎无法获得webpack来缩小bundle js。我的节点,webpack和某些依赖项版本进行了一些次要更新,但没有重大升级,也没有重大更改。 我一直在努力尝试使它恢复正常工作,并且正在向社区伸出手来让我保持理智。

一切似乎都编译良好,只有缩小似乎停止工作。优化对象是作为此故障排除的一部分添加的,并且在没有以前的情况下可以正常工作。

假设配置看起来还可以,那么webpack或节点中是否有任何新内容可能会阻止此工作?我感到难过...

webpack配置...

({
  devtool: 'source-map',
  entry: '/foo.js'
  externals: [nodeExternals()],
  mode: 'production',
  target: 'web',
  module: {
    rules: [
      {
        test: /\.coffee$/,
        use: [
          {
            loader: 'babel-loader'
          },
          {
            loader: 'coffee-loader'
          }
        ]
      },
      {
        test: /\.js$/,
        use: [
          {
            loader: 'babel-loader'
          }
        ]
      },
      {
        test: /\.(sass|css)$/,
        use: [
          {
            loader: Extract.loader,
            options: {
              sourceMap: true
            }
          },
          {
            loader: 'css-loader',
            options: {
              sourceMap: true
            }
          },
          {
            loader: 'sass-loader',
            options: {
              sourceMap: true
            }
          }
        ]
      }
    ]
  },
  optimization: {
    minimize: true,
    noEmitOnErrors: true
  },
  output: {
    filename: 'project_1.0.0.js',
    path: '/build'
  },
  plugins: [
    new Write,
    new Extract({
      filename: 'project_1.0.0.css'
    })
  ],
  resolve: {
    modules: ['node_modules']
  }
});

更新:找到解决方案

该问题归因于output.filename的.jss扩展名。将其更新为.js即可解决此问题。但是,这仍然是IMO一个奇怪的结果。如果出于好奇,我可能会发布另一个更新,说明webpack的行为

2 个答案:

答案 0 :(得分:0)

我怀疑由于您已经手动添加了optimization部分,因此您现在还需要在其上手动定义minimizer属性。尝试这样的事情:

const TerserPlugin = require('terser-webpack-plugin');

// ...

{
    optimization: {
        minimize: true,
        minimizer: [
            new TerserPlugin({
                terserOptions: {
                    parse: {
                        ecma: 8
                    },
                    compress: {
                        ecma: 5,
                        warnings: false,
                        comparisons: false,
                        inline: 2
                    },
                    mangle: {
                        safari10: true
                    },
                    output: {
                        ecma: 5,
                        comments: false,
                        ascii_only: true
                    }
                },
                parallel: true,
                cache: true,
                sourceMap: true
            })
        ];
    }
}

答案 1 :(得分:0)

因此,在为堆栈溢出帖子模拟webpack config js对象的过程中(我对某些值有一些变量和函数),我注意到对于output.filename,我有project.jss而不是project.js。我将其与Extract插件文件名混淆,并做了一个js / css混合扩展名...当我将其更正为.js时,它现在又可以工作了……这很好...但是...

为什么会破坏它?显然,您不能只用所需的扩展名创建捆绑包...但是为什么它不引发错误,为什么缩小是唯一不起作用的问题...这些都是更多的反问,但是我体内的程序员想弄清楚为什么..看来要做这件事是多余的工作。

@jayarjo感谢您抽出宝贵的时间回复。我不确定如果我没有在那里格式化缩进来尝试您的代码,我是否会抓住这一点。 :)