初めての投稿です。ちょっとずつアップデートしていきます。
先日、バージョン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