Help us understand the problem. What is going on with this article?

WebPackことはじめ。とりあえずjQueryを導入する。

More than 5 years have passed since last update.

WebPackBowerでjQueryを導入するところまでやってみました。

外部ライブラリを使う場合は通常どおり、scriptタグで読み込むのですが、あまり便利になった感がないのでbowerを使うようにしてみました。

基本的にはチュートリアルを参考にしています。

bowerの導入から実行までやってみました。

インストール

#bowerをインストール
npm install -g bower

#jQueryをインストール
bower install jquery

#bower.jsonを作成 とりあえず、モジュールの形式はglobalにします。
bower init  

#webpackをインストール -gだと後で参照エラーが起きてしまう。
npm install webpack --save-dev


準備

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"])
        )
    ]
};

index.html
<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <script type="text/javascript" src="bundle.js" charset="utf-8"></script>
    </body>
</html>
entry
var jQuery = require("jquery");//jQueryは任意

jQuery("body").append("Hello"));

確認

ビルド

コマンドを実行

webpack

起動

index.htmlを開くと"Hello"が表示されるはずです。

bundle.jsの中にjQueryが結合されています。

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でインストールしたので
チュートリアルの通りやってもうまく動かずハマりました。(・・;)

coa00
frontend, node.js あたりの仕事をする人。エンジニアからディレクションまでなんでもやる人。フリーランスのお友達とお仕事くださいー。
http://coa.nu
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした