webpack2 + Gulpで作るES2015開発環境

9523 ワード
babel webpack webpack2 gulp gulp テキストリンク

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

先日、バージョン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

参考サイト

サンプルで学ぶ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