webpack 不再缩小捆绑包

Posted 2023-03-10

【中文标题】webpack 不再缩小捆绑包

【英文标题】：webpack no longer minifying bundle

【发布时间】：2019-08-21 02:45:36

【问题描述】：

我正在编写一个通过 node vs cli 运行 webpack 编译器的 npm 模块。我有一段时间没有测试我的构建功能，因为它正在工作，但我最近运行了它，我似乎无法让 webpack 缩小捆绑 js。我的节点、webpack 和一些依赖版本有一些小的更新，但没有重大升级和重大更改。 我一直在努力让这项工作再次发挥作用，并且正在与社区联系以让我保持清醒。

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

假设配置看起来不错，webpack 或 node 中是否有任何新的东西可能会阻止它工作？我被难住了……

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 的行为

【参考方案1】：

我怀疑由于您手动添加了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
            )
        ];
    

【参考方案2】：

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

为什么会破坏它？显然你不能只创建一个包含任何你想要的扩展的包......但是为什么它不会抛出错误，为什么缩小是唯一不起作用的东西......这些都是修辞问题，但我的程序员想要找出原因.. 做它正在做的事情似乎需要额外的工作。

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