ファイル構成
- index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
...
</head>
<body>
...
<script src="dist/bundle.js"></script>
</body>
</html>
- package.json
{
"license": "MIT",
"scripts": {
"webpack": "webpack"
},
"dependencies": {
"webpack": "5.22.0",
"webpack-cli": "4.5.0"
}
}
- webpack.config.js
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js',
},
};
他にも少しディレクトリとファイルがありますが今回重要だと思うのは上記ファイルになりますので他は割愛させて頂きます。
概要
$ yarn webpack --mode=development
ターミナル上で上記を実行してdistディレクトリを作成して、bundle.jsファイルを作ろうとしました。
そうしたら、下記のようなエラーが出ました。
$ yarn webpack --mode=development
yarn run v1.22.19
$ webpack --mode=development
node:internal/crypto/hash:71
this[kHandle] = new _Hash(algorithm, xofLen);
^
Error: error:0308010C:digital envelope routines::unsupported
〜〜〜〜省略〜〜〜〜
opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
library: 'digital envelope routines',
reason: 'unsupported',
code: 'ERR_OSSL_EVP_UNSUPPORTED'
}
Node.js v19.0.0
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
その後色々とエラーコードを検索してweb上で調べまくっていたら全く同じエラーのstack overflowのページにたどり着きました。
そして判明したことは、
「Node.js17以降のバージョンではOpenSSLの関係でWebpack 4.xは動作できなくなっている」
ということでした。
自分が上記のコマンドを入力した時のNode.jsのバージョンは19.0.0でした。
そしてstack overflowのページでは「16.13.1にダウングレードするとうまくいきました」とのコメントがあったので、自分も同じく16.13.1にダウングレードした所、無事にコマンドが通りました。
$ yarn webpack --mode=development
yarn run v1.22.19
$ webpack --mode=development
asset bundle.js 4.03 KiB [emitted] (name: main)
runtime modules 670 bytes 3 modules
cacheable modules 92 bytes
./src/index.js 36 bytes [built] [code generated]
./src/bar.js 56 bytes [built] [code generated]
webpack 5.22.0 compiled successfully in 154 ms
✨ Done in 2.31s.
ということで無事にdistディレクトリにbundle.jsファイルが出来ました。
自分の備忘録として書きましたが、もし誰かの参考になれば幸いです。
お読み頂きましてありがとうございました。
ちなみに自分は今回Node.jsをダウングレードするにあたりNode.jsのバージョン管理ツールの「N」を使用しました。
参考サイト：n (Node.js管理) のインストール手順