webpackを使用してjsファイルをまとめる方法
本記事では、webpackを使用してjsファイルを
まとめる方法を紹介していきます。
本記事の内容です。
webpackって何?
簡単に説明しますと、複数のリソースファイル(jsファイル、cssファイル、画像ファイル等)をまとめた配布物を生成するビルドツールです。
これを使用すると、複数のファイルを配布する必要が無くなり、
また、ブラウザでファイルを読み込む時に複数のファイルを読み込む必要が
無くなるため、パフォーマンス向上を図れます。
また、公式サイトは下記になります。
webpack.js.org
webpackを使用する準備
コマンドプロンプトを開き、webpackを使用する対象のソースコードが存在するフォルダへ移動します。
その後、下記のコマンドを実行して、package.jsonを生成します。
npm init -y
webpackのインストール
package.jsonの生成が終わったら、次は、下記のコマンドを実行してwebpackを使用するためにwebpack本体のインストールを行います。
npm i -D webpack webpack-cli
webpackの設定ファイル作成
webpackのインストールが終わったら、package.jsonが存在するフォルダにwebpackの設定ファイル(webpack.config.js)を作成します。
下記の内容は、index.jsをメインにdistフォルダへ、
main.jsという名前で複数のjsファイルをまとめた結果を出力するようになっています。
module.exports = { // メインとなるJavaScriptファイル(エントリーポイント) entry: `./js/index.js`, // ファイルの出力設定 output: { // 出力ファイルのディレクトリ名 path: `${__dirname}/dist`, // 出力ファイル名 filename: 'main.js' }, };
JavaScriptソースコードの準備
今回は、index.jsとindex2.jsという2つのファイルを用意し、1つにまとめてみます。それぞれのファイルの内容は、下記の通りです。
index.js
import * as hogeFile from './index2'; $(function() { hogeFile.hoge(); hogeFile.fuga(); });
index2.js
export function hoge() { alert('hoge'); } export function fuga() { alert('fuga'); }
ビルド
下記のコマンドを実行し、ビルドを行います。npx webpack
以上で、複数のjsファイルをまとめることができます。
jsファイルをまとめた結果
最後に、参考までに今回jsファイルをまとめた結果を下記に記載しておきます。!function(e){var t={};function r(n){if(t[n])return t[n].exports;var o=t[n]={i:n,l:!1,exports:{}};return e[n].call(o.exports,o,o.exports,r),o.l=!0,o.exports}r.m=e,r.c=t,r.d=function(e,t,n){r.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},r.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.t=function(e,t){if(1&t&&(e=r(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(r.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)r.d(n,o,function(t){return e[t]}.bind(null,o));return n},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p="",r(r.s=0)}([function(e,t,r){"use strict";r.r(t),$(function(){alert("hoge"),alert("fuga")})}]);