はじめに
はじめまして、ベトナムから今年の1月に日本へ来て11ヶ月になるトアンです。趣味はサッカーやアニメを見ることです。
今回初めてエンジニアのブログを書くため緊張していますがよろしくお願いします。
最近、webpackというものが流行っているとのことで自分も触ってみました。
webpackの概要と基本的な使い方を紹介したいと思います。
参考リンク：tutorialzine.com
Webpackとは
Webpackとは、複数のファイルを１つにまとめてくれるものです。
最も多い使用の仕方は、JavaScriptファイルをバンドルすることですが、他にもcssや画像ファイルなどもまとめることができます。
まとめることでウェブページのHTTPリクエストの数を減らしたり、高度なウェブアプリケーションの開発に役立ちます。
使い方
インストール
Macで開発環境の設定する方法を紹介します。
Macでwepackの開発環境を立ち上げるために、node.jsが必要なので、nodejsをインストールします。
|
1 2 |
brew install node |
グローバルでwebpackをインストールしたい場合は：
|
1 2 |
npm install webpack -g |
グローバルの場合、全ての環境に影響するためローカルでの導入をおすすめします。
ローカルでwebpackをインストールしたい場合は：
|
1 2 |
npm install webpack -save-dev |
デモプロジェクトの作成
続いてデモプロジェクトを作成してみます。
まずは、プロジェクトフォルダと必要があるファイルを作成します。
|
1 2 3 4 5 |
mkdir webpack-demo cd webpack-demo mkdir src touch index.html src/index.js src/greeter.js webpack.config.js |
プロジェクトの構造は以下の通りです。
インストール後、ファイルを以下のように編集します。
- webpack.config.js
|
1 2 3 4 5 6 7 8 9 10 |
var path = require('path'); module.exports = { entry: './src/index.js', output: { filename: 'bundle.js', path: path.resolve(__dirname, 'dist') } }; |
Entryは他のjsファイルを参照しているmainのjsファイルを記述する必要があります。
なのでrequire文やimport文が記述されているファイルをここに書きます。
Outputはjsファイルを一つにまとめて出力するファイルを記述します。
今回は/dist/bundle.jsがwebpackコマンドを実行することによってできます。
まとめるjsファイルは以下の通りです。
- greeter.js
|
1 2 3 4 5 6 |
function greet() { console.log('こんにちは!'); }; export default greet; |
- index.js
|
1 2 3 4 5 |
import greet from './greeter.js'; console.log("エントリーポイント"); greet(); |
まとめたjsファイルを使用するhtmlは以下の通りです。
- index.html
実施
コマンドを実行して、bundle.jsを作成します。
|
1 2 |
webpack |
ブラウザでHTMLファイルを開くと、以下の結果となります。
index.js(エントリーポイント)とgreeterモジュールはbundle.jsという1つのファイルにコンパイルされ、ブラウザによって実行されました。
bundle.jsファイルの内容は以下となります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 |
/******/ (function(modules) { // webpackBootstrap /******/ var installedModules = {}; /******/ function __webpack_require__(moduleId) { /******/ if(installedModules[moduleId]) { /******/ return installedModules[moduleId].exports; /******/ } /******/ var module = installedModules[moduleId] = { /******/ i: moduleId, /******/ l: false, /******/ exports: {} /******/ }; /******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); /******/ module.l = true; /******/ return module.exports; /******/ } /******/ __webpack_require__.m = modules; /******/ __webpack_require__.c = installedModules; /******/ __webpack_require__.d = function(exports, name, getter) { /******/ if(!__webpack_require__.o(exports, name)) { /******/ Object.defineProperty(exports, name, { /******/ configurable: false, /******/ enumerable: true, /******/ get: getter /******/ }); /******/ } /******/ }; /******/ // getDefaultExport function for compatibility with non-harmony modules /******/ __webpack_require__.n = function(module) { /******/ var getter = module && module.__esModule ? /******/ function getDefault() { return module['default']; } : /******/ function getModuleExports() { return module; }; /******/ __webpack_require__.d(getter, 'a', getter); /******/ return getter; /******/ }; /******/ /******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); }; /******/ __webpack_require__.p = ""; /******/ /******/ return __webpack_require__(__webpack_require__.s = 0); /******/ }) /******/ ([ /* 0 */ /***/ (function(module, __webpack_exports__, __webpack_require__) { "use strict"; Object.defineProperty(__webpack_exports__, "__esModule", { value: true }); /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__greeter_js__ = __webpack_require__(1); console.log("エントリーポイント"); Object(__WEBPACK_IMPORTED_MODULE_0__greeter_js__["a" /* default */])(); /***/ }), /***/ (function(module, __webpack_exports__, __webpack_require__) { "use strict"; function greet() { console.log('こんにちは'); }; /* harmony default export */ __webpack_exports__["a"] = (greet); /***/ }) /******/ ]); |
最後に
なんとなくwebpackについて理解していただけたでしょうか？
JSだけでなく、CSSの管理もできて、とても便利だと思います。
もっと知りたい方は以下の参考リンクに進んでみてください。
