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

webpack最低限(JavaScript編)

More than 3 years have passed since last update.

webpackについて自分用のメモになります。

最低限という背景

普段はBtoB向けのコーポレートサイトの制作が多く、ビルドツールはGulpでもGruntでもなんでもよいのが現状であり、ビルドツールを使用しなくてもなんとかなる感じです。

ただ、流行や今後の動向は理解しておきたいということで、自分の中で最低限webpackでやりたいことを実装してみました。

最低限やりたいこと

  1. javascriptのモジュール管理、Minify、es6/2015のトランスパイル
  2. Sassのコンパイル、ベンダープレフィックスの付与
  3. ブラウザのオートリロード

上記の内容を数回に分けてまとめたいと思います。本記事では1のJS関連を扱います。

対象読者

流行はつかんでおきたいけどあまり難しいことはしたくない、とにかくwebpackを使ってみたいという方向けかと思います。

インストール

まずはwebpackをインストールします。(インストール済みの方は飛ばしてください)
グローバル、プロジェクト両方にインストールする方が良いでしょう。どちらか一方でも問題ありません。

・グローバル

npm install webpack -g

・プロジェクト

cd //プロジェクトのパス
npm init
npm install webpack --save-dev

プロジェクトディレクトリに移動しpackage.jsonを作成、その後プロジェクトのwebpackをインストールします。

実装

ディレクトリ構成

ディレクトリは以下の構成にします。

project /
 ├ webpack.config.js
 ├ dist /
 │ └ index.html
 └ src /
  ├ js /
   ├ entry.js
   └ print.js
 

jsファイルの作成

entry.js

メインの処理を行うjsファイルを作成します、(エントリーポイント)
モジュールの読み込みとes6/es2015のトランスパイルを行います。

entry.js
/*
/* module
**/
const print = require("./print");
print("Hello");

/*
/* es2015
**/
class Test {
  constructor(msg) {
    document.write(msg);
  }
}
let test = new Test('webpack');

print.js

print.js
module.exports = function(msg) {
  document.write(msg);
};

babelの準備

es6/es2015のトランスパイルを行うためbabelをインストールします。

npm install babel-loader babel-core babel-preset-es2015 --save-dev

webpack.config.jsの作成

webpackの設定ファイルを作成します。

webpack.config.js
module.exports = {
  context: __dirname + '/src',

  entry: {
    js: "./js/entry.js"
  },

  output: {
    path: __dirname + '/dist',
    filename: "./js/app.js"
  },

  module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        query: {
          presets: ['es2015']
        }
      }
    ]
  }
}

context

ビルドの対象となるディレクトリを定義します。

entry

ビルドの起点となるファイルのパスを記述します。requireの記述がされているjsファイルのパスを書きます。jsのビルドだけでなく、sassのビルドもjsのエントリーポイントで行うため、配列や連想配列を使い複数パスを指定することができます。

output

output.pathに出力先、output.filenameに出力ファイルのファイル名を指定します。

module

ビルドのメインとなる部分です。ビルドに必要なモジュール(loader)を指定します。

module.test

ビルドの対象ファイルを記述します。正規表現を使い全てのjsファイルを対象としています。

module.exclude

ビルドから除外するディレクトリを指定しています。/node_modules/を除外しないと処理が重くなるとのことです。

module.loader

ビルドで使用するloaderを指定しています。

module.query

パラメータの指定になります。babel6から仕様が変わり、presets: ['es2015']の指定が必要になったとのことです。

webpackの実行

下記コマンドでwebpackを実行します。

webpack

Minifyの設定

Minifyの設定をwebpack.config.jsに追加します。

webpack.config.js
//↓↓↓↓追加
const webpack = require("webpack");

module.exports = {
  context: __dirname + '/src',

  entry: {
    js: './js/entry.js'
  },

  output: {
    path: __dirname + '/dist',
    filename: "./js/app.js"
  },

  //↓↓↓↓追加
  plugins: [
    new webpack.optimize.UglifyJsPlugin()
  ],

  module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        query: {
          presets: ['es2015']
        }
      }
    ]
  }
}

一行目のconst宣言とpluginsを追加しました。webpackのUglifyJsPluginメソッドで圧縮できます。
追加したらwebpackを実行します。

圧縮はwebpack.config.jsに記述せず、webpackコマンドの引数でもできます。

webpack --optimize-minimize

最後に

おかしなところや間違っているところはお手数ですがご教授いただけますと幸いです。

参考にさせていただいたサイト

webpack module bundler
dackdive's blog
babel6での変更点 Gulp・Webpackの設定
webpackを使ってJSとCSSをコンパイルする(ES6 / Sass)

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
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