Go to Qiita Advent Calendar 2024 Top
LoginSignup
236
248

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

@cheez921(ちーず)in株式会社エイチームライフデザイン

はじめてのWebpack

Last updated at Posted at 2017-02-23

はじめに

この記事は初心者でもwebpackを用いて簡単な環境を構築できるように書いた記事です。
中級者以上でしたらおそらく物足りない記事になるかもしれませんが、初心者には十分な環境を整えることができると思います。

今回用いた環境

  • macOS Sierra 10.12.2
  • Node.js v6.9.1
    入ってるかわからない人は $ node -vと打ってみてください。
    v6.9.1などバージョンが表示されたらおっけーです。

node.jsをまだインストールしていない人は下記のリンク等などを見てインストールしてみてください。
5分で終了。node.jsの環境構築が拍子抜けするほど簡単だったのでサンプルプログラム付きでまとめてみました【Mac編】

準備

それでは、環境を作っていく流れをまずはざっくりと説明していきます。
ターミナルを開いて準備しましょう。

1. まずはディレクトリ作成。

普通に新しいフォルダーを作るのもok
$ mkdir ディレクトリ名 で作るのもok
ちなみにmkdirはmake directoryの略だそうです。

2. 先ほど作成したディレクトリに移動してpackage.jsonの作成

ディレクトリの移動は$ cd ディレクトリ名でできます。
ちなみにcdはchange directoryの略だそうです。
package.jsonを作成するコマンドは
$ npm init
いろいろ表示されるけどすべてenterで大丈夫です。

webpackを導入

webpackとは

分かりやすい記事があったので引用しました。

Webpackとは、Webコンテンツを構成するファイルを「モジュール」という単位で取り扱い、最適な形に作り変える為のツール ( JS開発で人気のWebpackとは!? 5分でわかる入門記事 - ICS MEDIA )

WebApp に必要なリソースの依存関係を解決し、アセット（配布物）を生成するビルドツール（要するにコンパイラ）( webpack で始めるイマドキのフロントエンド開発 - Qiita )

とっても簡単に言えば、部品さえ作っておけばうまく適切な形に組み立ててくれるのがwebpackですかね。

インストールの手順

パッケージをインストールするときは

グローバル
$ npm install -g パッケージ
( permissionエラーでたら権限がないのでnpmの前にsudoつける)

現在のディレクトリ
$ npm install --save-dev パッケージ

とコマンドを打ってインストールします。

今回はディレクトリにwebpackをインストールするので
$ npm install --save-dev webpack
と打ちましょう。

そうすると、node_modulesというフォルダが出来上がります。

package.jsonを見ると

package.json
"devDependencies": {
    "webpack": "^2.2.1"
  }

こんなのが増えてますね。

webpack.config.jsの作成

まずはこんな感じにファイルを生成していきましょう。

webpack-demo
│  index.html
│  package.json
│  webpack.config.js
└─ src
	─test.js
└─ node_modules

webpack.config.jsにプログラムを書いてみましょう。
webpack とは、コマンドを打っただけでコンパイルするように設定するファイルです。
loaderの中はあとからどんどん追加していきますので、まずはここまで。

webpack.config.js
module.exports = {
  entry: __dirname + "/src/test.js", //ビルドするファイル
  output: {
    path: __dirname +'/dist', //ビルドしたファイルを吐き出す場所
    filename: 'bundle.js' //ビルドした後のファイル名
  },
	module: {
    loaders: [
			//loader
	  ]
  }
};

webpack-dev-serverをインストール

ローカルのサーバーをwebpackで立ち上げることができます。
インストール
$ npm install --save-dev webpack-dev-server
サーバーを立ち上げる
$ webpack-dev-server

なお、package.jsonのscriptの中を書き換えることでコマンドを省略することが可能です。

package.json
  "scripts": {
    "start": "webpack-dev-server"
  }

この場合は、$ npm start とコマンドを打つと $ webpack-dev-server を起動することができるようになります。install, start, testなどデフォルトのタスクの場合は runはいらない様子。

babelを使ってES6をコンパイルする。

babelとは

babelとは次世代のJavaScriptの標準機能を、ブラウザのサポートを待たずに使えるようにするNode.js製のツール。 Babelの手ほどき - Babelとは | CodeGrid

babelのパッケージをインストール

今回は、babel-core、babel-loader、babel-preset-es2015、babel-preset-stage-0 babel-polypillのプラグインをインストールします。

npm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-stage-0 babel-polyfill
このようにパッケージは連続して書いてけば全部一気にインストールできます。

  • babel-core
    Babelのコンパイラのコア

  • babel-loader (webpack.config.jsにコンパイラとして指定)
    webpackでES2015構文で書いたファイルをトランスパイルするのに必要なローダー

  • babel-preset-es2015
    es2015をコンパイルしてくれる。

  • babel-preset-stage-0
    ステージを指定するもの。0は企画段階からの文法もかけちゃう。

  • babel-polyfill
    ES6の新しい機能などを利用するためのES5向けのライブラリ。
    jsにインポートして使う。プリセットではない。

package.jsonをみると

package.json
"devDependencies": {
    "babel-core": "^6.22.1",
    "babel-loader": "^6.2.10",
    "babel-preset-es2015": "^6.22.0",
    "babel-preset-stage-0": "^6.22.0",
    "webpack": "^2.2.1"
  }

しっかり増えてますね。

webpack.config.jsを書き換えてbabelでコンパイルできるようにする。

次は先ほど無視したlorderの中に追加していきます。

webpack.config.js
loaders: [
      // {
      //   test: ビルド対象のファイルを指定
      //   includes: ビルド対象に含めるファイルを指定
      //   exclude: ビルド対象に除外するファイルを指定
      //   loader: loaderを指定
      //   query: loader に渡したいクエリパラメータを指定
      // },
      {
       test: /\.js$/,
       loader: 'babel-loader',
       exclude: /node_modules/,
       query://loaderに渡したいクエリパラメータを指定します
        {
          presets: ['es2015','stage-0']
        }
      }
    ]

これで、webpackとbabelの環境設定はokです。
仮にindex.htmlとtest.jsにES2015(ES6)で何か書いて見ましょう。

index.html
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <script type="text/javascript" src="dist/bundle.js" charset="utf-8"></script>
  </body>
</html>
test.js
//(ES2015であればなんでもok !)
import 'babel-polyfill'

let num = 1;
console.log(num);

bundle.jsを確認してみて、let → var になってたらコンパイルされています。

他に導入したもの

sassをコンパイルするもの

もともとwebpack自体が、基本的に全てをjavascriptとして扱ってしまうため、cssを扱うことは少々難しく感じられた。
cssをwebpackで扱うことに関してわかりやすいと感じたのはこの記事なので、ぜひチェックを。
なんとなくで理解しないWebpackのCSS周辺 - Qiita

(今後新しい記事に書いていきます。)

vue.js

今回、vue.jsを使うためにwebpackを導入したので、vue.jsもちらりと。
vue.jsは下の記事を参考にしました。
npmとwebpackで作るVue.js
Introduction · GitBook

  • vue-routerとは
    シングルアプリケーションの構築をするときに、Vue.jsのコンポーネントを使ってアプリケーションを構成しており、そのコンポーネントとルートをマッピングさせてvue-routerにどこでレンダリングするか知らせるものである。

  • vue-cli
    シングルページアプリケーションを作成するのに必須なbabelやwebpackなど全てをインストールしてくれるフロントエンドのフレームワーク。オフィシャル。初心者のうちはあまり使わない方が良い。

  • インストール
    インストール - Vue.js
    npm install -g vue-cli

  • Vuex
    npm i —save vuex@^2.0.0-rc.5

  • vue-loader
    npm install —save vue-loader

はまったこと

  • webpackのバージョン

  • 変更しても同じエラーが出続けるときに、npm自体がキャッシュを持っていることがある。
    そのときは以下のコマンドを打つと良い。
    $npm cache clean

  • まさかのpackage.jsonでおこられました。笑
    Sorry, name can no longer contain capital letters.
    …名前に大文字を入れるなとおこられました、初歩的。

参考記事

webpackを使った開発の効率化方法やloaderの種類をTLで話してきました【スライド付き】 | 株式会社LIG

Webpackってどんなもの？

webpack.config.jsの読み方、書き方

webpack で始めるイマドキのフロントエンド開発 - Qiita

step by stepで始めるweb pack - Qiita

JS開発で人気のWebpackとは!? 5分でわかる入門記事 - ICS MEDIA

236
248
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
236
248

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?