--- title: WebPackことはじめ。とりあえずjQueryを導入する。 tags: JavaScript bower webpack author: coa00 slide: false --- [WebPack](http://webpack.github.io)と[Bower](http://bower.io)でjQueryを導入するところまでやってみました。 外部ライブラリを使う場合は通常どおり、scriptタグで読み込むのですが、あまり便利になった感がないのでbowerを使うようにしてみました。 基本的には[チュートリアル](http://webpack.github.io/docs/usage-with-bower.html)を参考にしています。 bowerの導入から実行までやってみました。 #インストール ```shell-session #bowerをインストール npm install -g bower #jQueryをインストール bower install jquery #bower.jsonを作成 とりあえず、モジュールの形式はglobalにします。 bower init #webpackをインストール -gだと後で参照エラーが起きてしまう。 npm install webpack --save-dev ``` # 準備 ```js:webpack.config.js var path = require("path"); var webpack = require("webpack"); module.exports = { entry: "./entry.js", output: { path: __dirname, filename: "bundle.js" }, resolve: { root: [path.join(__dirname, "bower_components")] }, plugins: [ new webpack.ResolverPlugin( new webpack.ResolverPlugin.DirectoryDescriptionFilePlugin("bower.json", ["main"]) ) ] }; ``` ```html:index.html ``` ```js:entry var jQuery = require("jquery");//jQueryは任意 jQuery("body").append("Hello")); ``` #確認 ## ビルド コマンドを実行 ```shell-session webpack ``` ## 起動 index.htmlを開くと"Hello"が表示されるはずです。 bundle.jsの中にjQueryが結合されています。 ```js:bundle.js /******/ (function(modules) { // webpackBootstrap /******/ // The module cache /******/ var installedModules = {}; /******/ // The require function /******/ function __webpack_require__(moduleId) { /******/ // Check if module is in cache /******/ if(installedModules[moduleId]) /******/ return installedModules[moduleId].exports; /******/ // Create a new module (and put it into the cache) /******/ var module = installedModules[moduleId] = { /******/ exports: {}, /******/ id: moduleId, /******/ loaded: false /******/ }; /******/ // Execute the module function /******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); /******/ // Flag the module as loaded /******/ module.loaded = true; /******/ // Return the exports of the module /******/ return module.exports; /******/ } /******/ // expose the modules object (__webpack_modules__) /******/ __webpack_require__.m = modules; /******/ // expose the module cache /******/ __webpack_require__.c = installedModules; /******/ // __webpack_public_path__ /******/ __webpack_require__.p = ""; /******/ // Load entry module and return exports /******/ return __webpack_require__(0); /******/ }) /************************************************************************/ /******/ ([ /* 0 */ /***/ function(module, exports, __webpack_require__) { var jQuery = __webpack_require__(2); jQuery("body").append(__webpack_require__(1)); // document.write("It works."); /***/ }, /* 1 */ /***/ function(module, exports, __webpack_require__) { module.exports = "It works from content.js."; /***/ }, /* 2 */ /***/ function(module, exports, __webpack_require__) { var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;/*! * jQuery JavaScript Library v2.1.4 * http://jquery.com/ * * Includes Sizzle.js * http://sizzlejs.com/ * * Copyright 2005, 2014 jQuery Foundation, Inc. and other contributors * Released under the MIT license * http://jquery.org/license * * Date: 2015-04-28T16:01Z */ (function( global, factory ) { if ( typeof module === "object" && typeof module.exports === "object" ) { // For CommonJS and CommonJS-like environments where a proper `window` // is present, execute the factory and get jQuery. // For environments that do not have a `window` with a `document` // (such as Node.js), expose a factory as module.exports. // This accentuates the need for the creation of a real `window`. // e.g. var jQuery = require("jquery")(window); // See ticket #14549 for more info. ``` #嬉しい所 外部JSはbowerでインストールするだけで、requireで読み込めるようになるので、 さくっと開発をはじめることができます。 webpackを使うとビルド環境がさくっとできるのでお手軽です。 #はまったところ チュートリアルをよく読むと書いてあるのですが、 node_moduleの中にwebpackがないと下記が参照エラーがおきてしまいます。 var webpack = require("webpack"); -gでインストールしたので チュートリアルの通りやってもうまく動かずハマりました。(・・;)