JavaScriptのフレームワークなどを使おうとするとwebpackという言葉が出てきます。簡単言うと、復数のJavaScriptのファイルを自動でひとつのファイルにまとめてくれます。
開発は保守が楽になり、ユーザーは多くのjsファイルを読み込む必要がなくなるので表示が早くなります。
Contents
Node.jsのインストール
リポジトリの追加
|
0 1 2 |
# curl -sL https://rpm.nodesource.com/setup_8.x | sudo bash - |
node.jsのインストール
|
0 1 2 |
# sudo yum install nodejs |
バージョン確認
|
0 1 2 |
# node -v |
webpackインストールの準備
ディレクトリとファイルの作成
|
0 1 2 |
# mkdir src |
|
0 1 2 |
# touch /src/index.js |
テストファイルの中身を作成
|
0 1 2 3 |
let str ='webpack sample'; console.log(str); |
webpackのインストール
|
0 1 2 |
# npm install webpack webpack-cli --save-dev |
webpackの実行
npxコマンドでwebpackを実行してみます。
|
0 1 2 |
# npx webpack |
|
0 1 2 3 4 5 6 7 8 9 10 |
npx: 320個のパッケージを12.428秒でインストールしました。 Hash: 3da581c39d81022949b4 Version: webpack 4.42.1 Time: 644ms Built at: 2020-04-03 20:46:01 Asset Size Chunks Chunk Names main.js 930 bytes 0 [emitted] main Entrypoint main = main.js [0] ./src/index.js 0 bytes {0} [built] |
このような表示が出れば成功です。jsファイルがmain.jsファイルにまとめて出力されました。
このメッセージの下にwarning（黄色）が出ますが、そちらは無視してOKです。
main.jsの中身
|
0 1 2 |
!function(e){var t={};function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)n.d(r,o,function(t){return e[t]}.bind(null,o));return r},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=0)}([function(e,t){console.log("webpack sample")}]); |
maim.jsの読み込み
ここまでの作業で「ドメイン名/sample」ディレクトリの中に、「dist」というディレクトリが作られています。その中に「index.html」ファイルを作り、main.jsファイルを読み込みます。
|
0 1 2 3 4 5 6 7 8 9 10 11 |
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>webpackテスト</title> </head> <body> <script src="./main.js"></script> </body> </html> |
これで「https://www.example.com/sample/dist/index.html」にアクセスして、コンソールをみてみます。
すると「webpack sample」と表示されました。
srcの中に復数のjsファイル（index.jsから他のjsファイルをインポート）を設置すると、ひとつのファイルにまとまります。
webpackのパスを通す
|
0 1 2 |
export PATH=$PATH:./node_modules/.bin |
