web-dev-qa-db-ja.com

webpack 4 uglifyjsが縮小および圧縮しない

私はwebpack 4を使用していますが、コードが圧縮および縮小されているかどうかはわかりません。 Reactも使用しています。

私の最初の問題は、webpack pluginプロパティまたはoptimizationプロパティでWebpack UglifyJSプラグインを使用することです。 pluginプロパティを使用すると、少なくとも1行には圧縮されないように見えます。それがミニファイであるかどうかはまだわかりません。 optimizationを使用すると、圧縮もされません。バンドルされたjsファイルを見ると、webpackのようにnode_modulesにバンドルされているようです。

// pluginと連携

module.exports = {
    ...
    plugins: [new UglifyJsPlugin({
        test: /\.js$/,
        exclude: /node_modules/,
        sourceMap: true,
        uglifyOptions: {
            compress: {},
            mangle: true,
        }
}],

// optimizationでは機能しません

module.exports = {
    ...
    optimization: {
        minimize: true,
        minimizer: [new UglifyJsPlugin({
            test: /\.js$/,
            exclude: /node_modules/,
            sourceMap: true,
            uglifyOptions: {
                compress: {},
                mangle: true,
             }
       }],
    }

最初の例では、コードは少なくとも1行に圧縮されますが、1行には圧縮されません。

//例

!*** ./node_modules/scheduler/index.js ***!
  \*****************************************/
/*! no static exports found */function(module,exports,__webpack_require__){"use strict";eval('\n\nif (false) {} else {\n...

 !*** ./node_modules/scheduler/tracing.js ***!
  \*******************************************/
/*! no static exports found */function(module,exports,__webpack_require__){"use strict";eval('\n\nif (false) {...

それが縮小されているかどうかもわかりません。私はReact Componentに関数を書きました

someFunc(one, two) {
    return one + two
}

Npm uglifyjsのドキュメントによると、これは

someFunc(a, b) { \n return a+b\n}

しかしそれはとして出力されています

someFunc(one, two) { \n return one + two\n}

これは縮小ですか？

javascriptreactjswebpackuglifyjs
3
henhen

Webpack 4は、デフォルトでproductionモードで最適化と縮小を行います。

したがって、私の推測が正しい場合、構成はdevelopment構成です。

明示的なUglifyJsPlugin定義を削除し、modeをproductionに設定すると、Webpackがすべてを処理します。

mode: 'production',
plugins: [...],
optimization: ...

必要に応じて、最適化をカスタマイズできます。ただし、モードをproductionに設定すると、期待どおりの結果が得られます。

詳細はこちら

Webpack 4モードの使用法

8
Dinesh Pandiyan

私も同じ問題に直面していました。モード設定値をプロダクションとして提供した後、動作を開始しました。

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

// command NODE_ENV=production webpack
1
Rakesh Rawat