参考URL
http://webpack.github.io/docs/usage.html
出来上がったソース
https://github.com/koh518/webpack_dojo
5秒ではじめるWebpack
webpackをインストールする
mkdir webpack_dojo # 作業directory作成
cd webpack_dojo
npm init
npm install -D webpack
簡単なJavascriptのコードを書いていく
cats.js
var cats = ['dave', 'henry', 'martha'];
module.exports = cats;
app.js (Entry Point)
cats = require('./cats.js');
console.log(cats);
Entry PointがJavascriptアプリケーションがスタートするファイルになる。
すなわち、Entry Pointoを起点として、webpackがmodules間の依存関係を解決することになる。
app.jsをEntry Pointとして依存関係を解決したapp.bundle.jsを作成する
webpack ./app.js app.bundle.js
Javascriptアプリケーションを実行する
node app.bundle.js
["dave", "henry", "martha"] // require('./cats.js'); が解決されている
Webpack with Configuration File
webpack コマンドに頑張って引数を渡してOne Lineでmodule依存関係を解決することも可能だが、シンプルに使用するために、設定ファイルをつくることでHappyになれる。
今度は設定ファイルであるwebpack.config.js を使って同じことをやってみる
下準備
mkdir bin
mkdir src
mv app.js cats.js src
webpack.config.js
module.exports = {
entry: './src/app.js',
output: {
path: './bin',
filename: 'app.bundle.js'
}
};
webpackを実行する(How simple)
webpack
Javascriptアプリケーションを実行する
node bin/app.bundle.js
["dave", "henry", "martha"]
Loaders
webpack単体だとJavascriptのみをサポートしているが、多くの人はES2015, CoffeeScript, TypeScriptのTranspilerを使っていると思う。webpackではこれらをloaders を使うことで対応でき
る。
具体例
babel-loader
ES2015 → Javascript(webpackが理解できる)
json-loader
JSON file → CommonJS module
babel-loaderを使ってES2015をTranspilingする
1 Babelとes2015 presetをインストールする
npm install --save-dev babel-core babel-preset-es2015
2 babel-loaderをインストールする
npm install --save-dev babel-loader
3 .babelrc へpresetの設定をする
.babelrc
{ "presets": [ "es2015" ] }
4 webpack.config.jsをbabel-loaderを使用するために変更する
module.exports = {
entry: './src/app.js',
output: {
path: './bin',
filename: 'app.bundle.js',
},
module: {
loaders: [{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
}]
}
}
exclude: /node-modules/,をすることで、外部ライブラリを全てBabelに通さないようにして、コンパイルが遅くなることを防いでいる。
test: /.js$/ 部分がtest なのは、内部的にregexp.match ではなくregexp.test を使用しているからだろうか(疑問)。個人的にこの名前はわかりづらいと思ってる。(match のほうがわかりやすいよね)
下記jQueryを利用した例となる
5 jQuery, babel-poyfillをインスト―ルする
npm install --save jquery babel-polyfill
babel-polyfillを使うことで、ES2015 APIを古いブラウザでも利用可能となる。
6 src/app.js を編集する
import 'babel-polyfill';
import cats from './cats';
import $ from 'jquery';
$('<h1>Cats</h1>').appendTo('body');
const ul = $('<ul></ul>').appendTo('body');
for (const cat of cats) {
$('<li></li>').text(cat).appendTo(ul);
}
7 webpackを実行する
webpack
8 index.html を新規作成する
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script src="bin/app.bundle.js" charset="utf-8"></script>
</body>
</html>
9 ブラウザにてindex.html を開くとcats がリスト表記されていることが確認できる。
おまけ: Pluginsを使って、minifyingする
下記の用にwebpack.config.js へwebpack.optimize.UglifyJsPlugin の設定をすることでJavascriptのコードを宜しく圧縮してデータ量を節約できる。
const webpack = require('webpack');
module.exports = {
entry: './src/app.js',
output: {
path: './bin',
filename: 'app.bundle.js',
},
module: {
loaders: [{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel-loader',
}]
},
plugins: [
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false,
},
output: {
comments: false,
},
}),
]
}