Webpack没有缩小我的捆绑js [英] Webpack not minifying my bundle js

问题描述

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

I'm now bundling my first project with webpack, everything works as expected except webpack is not minifying my bundle.min.js code.

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

I'm pretty sure I'm doing something wrong, but can't spot the mistake.

任何帮助都将不胜感激。在此先感谢。

Any help would be appreciated. Thanks in advance.

这里我去了我的 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]"
            }
          }
        ]
      }
    ]
  }
};

推荐答案

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

Webpack supports minification out of the box. By including the -p flag when running webpack it will minify your code for you. The -p flag is a shortcut for --optimize-minimize flag.

运行： webpack -p

这篇关于Webpack没有缩小我的捆绑js的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！