F
F
fillpower2019-10-18 13:40:46
JavaScript
fillpower, 2019-10-18 13:40:46

How to add minification to webpack?

Good afternoon, there is such an assembly, I can’t add uglify JS to the production assembly, tell me how to do it right?

const path = require('path')

const postcssNested = require('postcss-nested')
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer')
const CopyPlugin = require('copy-webpack-plugin')
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')

const output = path.resolve(__dirname, 'target')

module.exports = {
    entry: {
        index: require.resolve('./src/index.js')
    },
    output: {
        path: output,
        filename: 'index.js'
    },
    module: {
        rules: [
            // js-файлы
            {
                test: /\.js$/,
                exclude: /node_modules[\\/].*/,
                use: require.resolve('babel-loader')
            },
            // css-файлы
            {
                test: /\.css$/,
                use: [
                    require.resolve('style-loader'),
                    {
                        loader: require.resolve('css-loader'),
                        options: {
                            modules: true,
                            importLoaders: 1
                        }
                    },
                    {
                        loader: require.resolve('postcss-loader'),
                        options: {
                            plugins: [
                                postcssNested
                            ]
                        }
                    }
                ]
            }
        ]
    },
    plugins: [
        new CopyPlugin([
            {
                from: 'static',
                to: '.'
            }
        ])
    ]
}

if (process.env.NODE_ENV === 'production') {
    module.exports.plugins.push(
        new BundleAnalyzerPlugin({
            reportFilename: './statistics.html',
            analyzerMode: 'static',
            openAnalyzer: false
        })
    )
}

Answer the question

In order to leave comments, you need to log in

2 answer(s)
S
Sergey Sokolov, 2019-10-18
@sergiks

lost:

optimization: {
    minimizer: [
      new UglifyJsPlugin({
        sourceMap: true
      })
    ]
  },

See the documentation for the UglifyJsPlugin plugin

P
Petr Muhurov, 2019-10-18
@pterodaktil

const config = {
 ...
 optimization: {}
};

if (process.env.NODE_ENV === "production") {
  config.optimization.minimizer = [
    new UglifyJsPlugin({
      sourceMap: true,
      parallel: true,
      uglifyOptions: {
        compress: {
          drop_console: true
        }
      }
    })
  ];
}

module.exports = config;

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question