webpack の基本設定
webpack を初めて触ったので、調べたことなどを備忘録として残しておく。webpack のインストールから、ES6, jQuery, Sass, compass の対応まで。
- 1. npm の準備
- 2. ローカルに webpack をインストール
- 3. ローカルにパスを通す
- 4. webpack でビルドをテストする
- 5. webpack.config.js からビルドする
- 6. watch モードにする
- 7. jquery を使う
- 8. ES6 に対応させる
- 9. js を minimize する
- 10. Sass の設定をする
- 11. compass を使う場合
1. npm の準備
package.jsonを作る。
npm init
2. ローカルに webpack をインストール
package.json に書き込みたいので、--save-dev オプションをつける。
npm install webpack --save-dev
No repository field. と怒られた場合、一先ず、package.json に "private": true を追加すれば警告は消える。
ドキュメントに依ると、
If you set “private”: true in your package.json, then npm will refuse to publish it.
This is a way to prevent accidental publication of private repositories. If you would like to ensure that a given package is only ever published to a specific registry (for example, an internal registry), then use the publishConfig dictionary described below to override the registry config param at publish-time.
要は公開用のリポジトリじゃなく、プライベートなリポジトリのみで使うっていう設定。これを指定すれば、repository field の指定がなくても許される。
3. ローカルにパスを通す
このままだと、webpack コマンドは動かないので、パスを通す。
export PATH=$PATH:./node_modules/.bin
以下でバージョンが確認出来る。
webpack -v
もちろん、パスを通す必要がないなら、直接、
node_modules/.bin/webpack -v
でも良い。
4. webpack でビルドをテストする
適当に、sub.js を作る。
module.exports = ["a", "b", "c"];
module.export は return 的なやつ。これを app.js で読み込み、出力する。
console.log(require("./sub.js"));
これを bundle.js としてビルドする。
webpack app.js bundle.js
実行すると、
Version: webpack 2.6.1
Time: 81ms
Asset Size Chunks Chunk Names
bundle.js 2.78 kB 0 [emitted] main
[0] ./sub.js 34 bytes {0} [built]
[1] ./app.js 34 bytes {0} [built]
こんな感じの実行結果と bundle.js が書き出されている。
この bundle.js を実行すると、次のような結果になる。
[ 'a', 'b', 'c' ]
なお、npm の実行時にこれも一緒にビルドして欲しいので、build: の項目を設け、そこに追加する。
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack app.js bundle.js"
},
そうすれば、
npm run build
でビルドしてくれる。
5. webpack.config.js からビルドする
そもそも webpack 実行時に js のビルドも自動的にしてほしいので、webpack.config.js にその設定を書く。
まずは、package.json の build: 項目を webpack だけにして、
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack"
},
以下のように webpack.config.js を作成。entry と output の filename 指定する。
module.exports = {
entry: "./app.js",
output: {
filename: "bundle.js"
}
}
そうすれば、先ほどと同様に、
npm run build
でビルド出来る。ディレクトリパスを別途指定するなら、path モジュールを読み込んで、
var path = require('path');
module.exports = {
entry: "./js/modules/app.js",
watch: true,
output: {
path: path.join(__dirname, './js'),
filename: "bundle.js"
}
}
のようにする。
6. watch モードにする
ファイルを監視させて、変更時に自動ビルド。コマンドラインから設定するなら、
webpack --watch
一方、webpack.config.js で指定するなら、watch: を設けて、true にする。
module.exports = {
watch: true,
entry: "./app.js",
...省略...
7. jquery を使う
まずは、npm で jquery をダウンロード。プロダクトでもつかうので、 オプションは --save。
npm install jquery --save
var $ = require("jquery");
$(function(){
});
件の通り、$ に jquery をつっこむだけ。
8. ES6 に対応させる
ES6 を ES5 にコンパイルというかトランスパイルというか、とにかく変換する場合は、babel-loader を使う。
開発用なので、オプションは --save-dev でインストールする。
npm install babel-loader babel-core babel-preset-es2015 --save-dev
webpack.config.js に以下を追加する。
...省略...
module: {
loaders: [{
test: /\.js[x]?$/,
exclude: /node_modules/,
loader: 'babel-loader?presets[]=es2015'
}]
}
...省略...
正規表現で node_modules を除く js 系の拡張子を対象にしている。
試しに app.js を次のように書き換え、
/*jshint esversion: 6 */
var $ = require("jquery");
$(function(){
"use strict";
const hoge = "!!!!";
$("body").text(hoge);
});
ビルドすると、bundle.js では、
...省略...
/*jshint esversion: 6 */
var $ = __webpack_require__(0);
$(function () {
"use strict";
var hoge = "!!!!";
$("body").text(hoge);
});
...省略...
const -> var の変換がされている。
9. js を minimize する
圧縮したいなら、packege.json の build: で --optimize-minimize のオプションをつける。
ただ、このままだとデバッグし難いので、更に --devtool source-map のオプションもつけて、デベロッパーツールから圧縮前を見れるようにする。
...省略...
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack --optimize-minimize --devtool source-map"
},
...省略...
これで、Chrome デベロッパーツールの Sources タブに webpack:// のディレクトリが表示される。
source-map は webmap.config.js でも指定できる。
末尾に devtool: の項目を追加し、source-map を指定する。
...省略...
module: {
loaders: [{
test: /\.js[x]?$/,
exclude: /node_modules/,
loader: 'babel-loader?presets[]=es2015'
}]
},
devtool: 'source-map'
...省略...
10. Sass の設定をする
まずは、必要なモジュールをインストール。
npm install --save-dev node-sass style-loader css-loader sass-loader extract-text-webpack-plugin
css の出力も可能にするため、extract-text-webpack-plugin も入れている。
webpack.config.js の exports の対象をオブジェクト（{}）からオブジェクトの配列（[{},{}]）形式にして、次のように変更する。
var path = require('path');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = [
/**
* js の設定
*/
{
entry: "./js/modules/app.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/modules/style.scss',
watch: true,
output: {
path: path.join(__dirname, './css'),
filename: 'app.css'
},
module: {
loaders: [{
test: /\.scss$/,
loader: ExtractTextPlugin.extract('css-loader!sass-loader')
}]
},
plugins: [
new ExtractTextPlugin('app.css')
],
devtool: 'source-map'
}
];
これで、複数指定ができる。なお、出力先のディレクトリなども整理してある。
11. compass を使う場合
npm install --save-dev compass-mixins
sass-loader の includePaths に compass-mixins/lib を指定して読み込ませる。
/**
* Sass の設定
*/
{
entry: './css/modules/style.scss',
watch: true,
output: {
path: path.join(__dirname, './css'),
filename: 'app.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('app.css')
],
devtool: 'source-map'
}
下の config ファイルを参考にさせてもらった。
