LoginSignup
18

More than 5 years have passed since last update.

webpack2 + Gulpで作るES2015開発環境

Last updated at Posted at 2017-03-14

初めての投稿です。ちょっとずつアップデートしていきます。

webpack.png

先日、バージョン1からバージョン2へアップグレードされたwebpack。
webpackは複数ファイルのJavaScriptやCSS、画像をモジュールとして扱うためのツールです。

Gitリポジトリ:
https://github.com/xpics/demo-webpack2-gulp-es2015

セットアップ

プロジェクト用のディレクトリを作成し、package.jsonを生成する。

% mkdir demo-webpack2-gulp-es2015
% cd demo-webpack2-gulp-es2015
# npm init -y

Gulp, webpack, webpack-stream

Gulp本体、webpack本体、GulpとwebpackをつなぐためのGulpプラグインwebpack-streamをインストールする。

% npm install --save-dev gulp webpack webpack-stream
% touch .babelrc gulpfile.babel.js webpack.config.js

Gulpタスクを記述

gulpfileをES2015(ES6)にて記述するため、.babelrcを以下のように設定する。

{
  "presets": ["es2015"]
}
gulpfile.babel.js
import gulp from 'gulp';
import webpackStream  from 'webpack-stream';
import webpack from 'webpack';


import webpackConfig from './webpack.config';
gulp.task("webpack", () => {
    return webpackStream(webpackConfig, webpack)
        .pipe(gulp.dest("dist"));
});

webpack設定ファイルを記述

webpack.config.js
module.exports = {
    entry: "./src/app.js",
    output: {
        filename: "./bundle.js"
    },
    module: {
        rules:[
            {
                test: /\.js$/,
                use: [
                    {
                        loader: "babel-loader",
                        options: {
                            presets: [
                                ['es2015']
                            ]
                        }
                    }
                ]
            }
        ]
    }
}

Babelの動作に必要なnpmモジュールとbabelのプリセットをインストールする。

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

package.jsonのscript以下に追記する。

package.json
"scripts": {
    "gulp": "gulp"
}

動作確認

ソースファイルの準備

/src/app.js
import sub from "./sub";

sub.hello();
/src/sub.js
module.exports.hello = () => {
    alert("Say! Hello!");
}

動作確認用ファイルの準備

/dist/index.html
<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>webpack2 + Gulp でつくるES2015開発環境</title>
    </head>
    <body>
        <script src="./bundle.js"></script>
    </body>
</html>

webpackの実行

npm run gulp webpack

ブラウザにて動作を確認

% open ./dist/index.html

webpack2 + Gulp でつくるES2015開発環境.png

参考サイト

サンプルで学ぶwebpack 2入門:Web開発を超効率化する必須ツールの使い方 - WPJ
https://www.webprofessional.jp/beginners-guide-to-webpack-2-and-module-bundling/

Gulpで始めるwebpack 2入門
http://qiita.com/tonkotsuboy_com/items/2d4f3862e6d05dc0bea1

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
18