Posted in webpack

[webpack] インストールと使い方

   Published Date: 2020年4月4日

JavaScriptのフレームワークなどを使おうとするとwebpackという言葉が出てきます。簡単言うと、復数のJavaScriptのファイルを自動でひとつのファイルにまとめてくれます。
開発は保守が楽になり、ユーザーは多くのjsファイルを読み込む必要がなくなるので表示が早くなります。

Node.jsのインストール

リポジトリの追加

# curl -sL https://rpm.nodesource.com/setup_8.x | sudo bash -

node.jsのインストール

# sudo yum install nodejs

バージョン確認

# node -v

webpackインストールの準備

ディレクトリとファイルの作成

# mkdir src
# touch /src/index.js

テストファイルの中身を作成 

let str ='webpack sample';
console.log(str);

webpackのインストール

# npm install webpack webpack-cli --save-dev

webpackの実行

npxコマンドでwebpackを実行してみます。

# npx webpack
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の中身

!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ファイルを読み込みます。

<!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のパスを通す

export PATH=$PATH:./node_modules/.bin


Author: webmaster