webpack をサクッと使う手順
- 0. ディレクトリとテストファイルの準備
- 1. package.json を作る
- 2. devDependencies に追加する
- 3. dependencies に追加する
- 4. package.json を修正
- 5. webpack.config.js を置く
- 6. ビルドして確かめる
webpack の基本操作 にて述べた方法で、効率良く開発環境を整える手順を改めてまとめておく。
要件は、
- js モジュールの統合と単一書き出し
- sass の 統合と css 単一書き出し
- compass の読み込み
- js, css のミニマイズ
- js, css の map ファイルの生成
- ES6 -> ES5 トランスパイル（コンパイル）
- jquery の読み込み
- watch で変更を監視
完成後のディレクトリ構成（ビルド前）は次のようになる。
project/
├── _css
│ ├── entry.sass
│ └── sub.sass
├── _js
│ ├── entry.js
│ └── sub.js
├── css
├── js
├── node_modules
├── package.json
├── webpack_index.html
└── webpack.config.js
- ビルド前の各モジュールは
_（アンダースコア）から始まるディレクトリに入れる - ビルド後のファイルは、それぞれ js, css ディレクトリに格納される
- webpack_index.html は確認用の html
0. ディレクトリとテストファイルの準備
# 各ディレクトリ
mkdir {_css,_js,css,js}
# テスト用 html
echo '<html><link rel="stylesheet" media="all" href="./css/style.css"><body><h1></h1></body><script src="./js/bundle.js"></script></html>' > webpack_index.html
# entry.scss
echo '@import "compass"; @import "sub"; h1 { @include inline-block; color: #f00; }' > _css/entry.scss
# sub.scss
echo '@import "compass"; h1 { background-color: #000; }' > _css/sub.scss
# entry.js
echo 'var $ = require("jquery"); $(function(){$("h1").text(require("./sub.js"));});' > _js/entry.js
# sub.js
echo 'module.exports = "OK";' > _js/sub.js
- webpack_index.html ではビルド後の js と css の読み込みの他、h1 タグを用意しておく
- entry.scss では sub.scss を読み込む他、h1 を赤字に、また compass で inline-block にする
- sub.scss では h1 の背景を黒にする
- entry.js では jquery の読み込みの他、sub.js の出力を h1 にセットする
- sub.js は “OK” を返す
- ビルド後のイメージは次の感じ
1. package.json を作る
-y オプションを付けて対話をせずに、初期化する。
npm init -y
2. devDependencies に追加する
npm install --save-dev webpack babel-loader babel-core babel-preset-es2015 node-sass style-loader css-loader sass-loader extract-text-webpack-plugin compass-mixins
それぞれ、
webpack 本体
- webpack
ES6 対応
- babel-loader
- babel-core
- babel-preset-es2015
- sass 対応
- node-sass
- style-loader
- css-loader sass-loader
- sass -> css 書き出し対応
- extract-text-webpack-plugin
- compass 対応
- compass-mixins
3. dependencies に追加する
npm install jquery --save
4. package.json を修正
...
"private": true,
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack --optimize-minimize"
},
...
- プライベート用にして警告排除
"private": true- ビルドファイルのミニマイズ設定
"build": "webpack --optimize-minimize"
5. webpack.config.js を置く
var path = require('path');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = [
/**
* js
*/
{
entry: "./_js/entry.js",
watch: true,
output: {
path: path.join(__dirname, './js'),
filename: "bundle.js"
},
module: {
loaders: [{
test: /\.js[x]?$/,
exclude: /node_modules/,
loader: 'babel-loader?presets[]=es2015'
}]
},
devtool: 'source-map'
},
/**
* Sass
*/
{
entry: './_css/entry.scss',
watch: true,
output: {
path: path.join(__dirname, './css'),
filename: 'style.css'
},
module: {
loaders: [{
test: /\.scss$/,
loader: ExtractTextPlugin.extract({
use: [{
loader: 'css-loader'
},
{
loader: 'sass-loader',
options: {
includePaths: ['node_modules/compass-mixins/lib']
},
}
],
fallback: 'style-loader'
})
}]
},
plugins: [
new ExtractTextPlugin('style.css')
],
devtool: 'source-map'
}
];
6. ビルドして確かめる
npm run build
実行後、webpack_index.html をブラウザで開き、
と表示されれば、js, sass ともにビルドができている。
また、js/bundle.js, css/style.css はそれぞれミニマイズされていて、かつ同階層に map ファイルも出力されていれば問題ない。
