続・ Gulp 4 + Webpack 5 を試す (resolutions 使用)

以前、Gulp 4 + Webpack 5 を試す ( 未完 / terser-webpack-plugin で TypeError: Cannot read property ‘javascript’ of undefined エラーになる)の記事で Gulp 4 + Webpack 5 の実験をしましたが、その続きです。

経緯

BackstopJS を試す (Error: Failed to launch the browser process! エラー発生→ puppeteer のバージョンを指定して解決)で package.json に resolutions を記述して Yarn で内部依存パッケージのバージョンを強制的に変更する手法を取りましたが、同様の手法が使えるのではないか、と思った次第です。

検証

package.json

// 略
    "devDependencies": {
// 略
        "webpack": "^5.6.0",
        "webpack-stream": "^6.1.1",
        "terser-webpack-plugin": "^5.0.3",
// 略
    },
    "resolutions": {
        "webpack": "^5.6.0"
    },
// 略

上述のように resolutions で Webpack のバージョンを指定。

gulp/tasks/js.js

gulp/tasks/js.js は前回のまま。

webpack.config.js

webpack.config.js は source map のための設定を追加した以外はそのままです。

const _         = require('./gulp/plugin');
const dir       = require('./gulp/dir');

const mode = () => {
    return process.env.DEV_MODE === 'dev' ? 'development' : 'production';
};
const modeFlag = () => {
    return process.env.DEV_MODE === 'dev' ? false : true;
};
const entry = () => {
    const entries = _.glob
        .sync(
            '**/*.js',
            {
                ignore: [
                    '_plugins/**'
                ],
                cwd: dir.src.js
            }
        )
        .map(function (key) {
            return [key, _.path.resolve(dir.src.js, key)];
        });
    return Object.fromEntries(entries)
};
const configs = {
    mode: mode(),
    entry: entry(),
    output: {
        filename: '[name]'
    },
    optimization: {
            minimizer: [
            new _.webpackTerser({
                extractComments: 'some',
                terserOptions: {
                    compress: {
                        drop_console: modeFlag(),
                    },
                },
            }),
        ],
    }
};
if (process.env.DEV_MODE === 'dev') {      // 追加
    configs.devtool = 'inline-source-map';
}

module.exports = configs;

これで yarn restart などすると

$ gulp

# 略

[hh:ii:ss] asset app.js 226 KiB [emitted] [minimized] (name: app.js) 1 related asset

webpack 5.6.0 compiled successfully
[hh:ii:ss] Finished 'jsBuild' after 20 s

動きました！

---

後々は resolutions なしでも動くようにしたいですが、ひとまず動く形になったのでメモしておきます。

参考

Yarn の reasolutions

• yarn: resolutions で依存の依存のバージョンを指定する – nju33