Question

我现在将我的第一个项目与webpack捆绑在一起，除了webpack没有缩小我的bundle.min.js代码之外，一切都按预期工作。

我很确定我做错了什么，却无法发现错误。

任何帮助将不胜感激。提前谢谢。

我带着webpack.config.js

去了

var webpack = require("webpack");
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');

module.exports = {
  context: __dirname + "/public",
  entry: './app.js',
  output: {
      path: __dirname + '/dist',
      filename: "bundle.min.js"
  },
  plugins: [
      new webpack.ProvidePlugin({
         $: "jquery",
         jQuery: "jquery"
     }),
     new webpack.LoaderOptionsPlugin({
      minimize: true,
      debug: true
    }),
     new webpack.optimize.UglifyJsPlugin({
       beautify: false,
        mangle: {
          screw_ie8: true,
          keep_fnames: true
        },
        compress: {
          screw_ie8: true
        },
        comments: false
    }),
     new ExtractTextPlugin("bundle.min.css"),
     new OptimizeCssAssetsPlugin()
  ],
  module: {
    loaders: [
      {
        test: /\.css$/,
        loader: ExtractTextPlugin.extract({ fallback: 'style-loader', use: 'css-loader' })
      },
      {
        test: /\.(jpe?g|png|gif|svg)$/i,
        use: [
          {
            loader: "file-loader",
            options: {
              hash: "sha512",
              digest: "hex",
              name: "./img/[hash].[ext]"
            }
          },
          {
            loader: "image-webpack-loader",
            query: {
              mozjpeg: {
                progressive: true,
              },
              gifsicle: {
                interlaced: false,
              },
              optipng: {
                optimizationLevel: 4,
              },
              pngquant: {
                quality: '75-90',
                speed: 3,
              },
            },
          }
        ]
      },
      {
        test: /\.(eot|svg|ttf|woff|woff2)$/,
        use: [
          {
            loader: "file-loader",
            options: {
              name: "./fonts/[name].[ext]"
            }
          }
        ]
      }
    ]
  }
};

Answer 1

Webpack支持开箱即用。通过在运行-p时添加webpack标记，它将为您缩小代码。 -p标志是--optimize-minimize标志的快捷方式。

运行：webpack -p

Answer 2

我在Webpack 4中也遇到了这个问题。升级到Webpack 4.28.2后，它消失了。

Answer 3

我也面临着同样的问题。在将模式配置值提供为生产后，它开始工作。

module.exports = {
    // webpack config
    mode: process.env.NODE_ENV || 'development',
};

// command NODE_ENV=production webpack

Webpack没有缩小我的捆绑js

3 个答案: