2020-11-24に投稿

続・ 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.jsonresolutions を記述して Yarn で内部依存パッケージのバージョンを強制的に変更する手法を取りましたが、同様の手法が使えるのではないか、と思った次第です。

検証

package.json

```json: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 のための設定を追加した以外はそのままです。 ```javascript:webpack.config.js 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

Originally published at labor.ewigleere.net
ツイッターでシェア
みんなに共有、忘れないようにメモ

arm-band

フロントエンド・バックエンド・サーバエンジニア。LAMPやNodeからWP、Gulpを使ってejs,Scss,JSのコーディングまで一通り。たまにRasPiで遊んだり、趣味で開発したり。

Crieitは誰でも投稿できるサービスです。 是非記事の投稿をお願いします。どんな軽い内容でも投稿できます。

また、「こんな記事が読みたいけど見つからない!」という方は是非記事投稿リクエストボードへ!

有料記事を販売できるようになりました!

こじんまりと作業ログやメモ、進捗を書き残しておきたい方はボード機能をご利用ください。
ボードとは?

コメント