はじめがき
フロントエンドの開発環境複雑スギィ!
ES6モジュールが使える最小構成を目標とした覚書です。
間違ってることあったら教えてください。
環境
MacbookPro
node.js v6.5.0
インストール
# プロジェクトフォルダの作成
mkdir myProject && $_
# package.jsonの生成 (エンター連打)
npm init
# webpackのグローバルインストール
npm i -g webpack
# webpackのローカルインストール
npm i --save-dev webpack
# babelの一連パッケージをインストール
npm i --save-dev babel-core
npm i --save-dev babel-loader
npm i --save-dev babel-preset-es2015
サンプルファイル
mkdir src/ && $_
touch animal.js dog.js app.js cats.js
animal.js
class Animal {
constructor(name) {
this.name = name;
}
}
export default Animal;
dog.js
import Animal from './animal';
class Dog extends Animal {
callName() {
alert(this.name);
}
}
const dog = new Dog('Natsu');
dog.callName();
app.js
import cats from './cats';
console.log(cats);
cats.js
const cats = ['tama', 'kuro', 'tora'];
export default cats;
ファイル構成はこうなります
tree
myProject
|-- node_modules/
|-- src
| |-- animal.js
| |-- app.js
| |-- cats.js
| +-- dog.js
|
|-- .babelrc
|-- package.json
+-- webpack.config.js
babelの設定
.babelrc
{
"presets": [
"es2015"
]
}
webpackの設定
webpack
をコマンドラインで実行することでentry
の依存関係を解決したファイルがoutput
で記述したファイルで生成されます。
webpack.config.js
module.exports = {
entry: ['dog.js', 'cats.js'],
output: {
path: './dist',
filename: 'bundle.js',
},
module: {
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
},
],
},
},
webpack.config.jsの書き方
上の例ではbundle.js
にひとまとめされてしまうので、依存関係のあるファイルごとにファイルを生成する場合、以下のようにentry
をオブジェクトで指定します
webpack.config.js
...
- entry: ['dog.js', 'cats.js'],
+ entry: {
+ 'dog': 'src/dog.js',
+ 'app': 'src/app.js',
+ }
output: {
path: './dist',
- filename: 'bundle.js',
+ filename: '[name].js'
},
todo
webpack.config.jsの詳細
webpack -watch
参考
webpack.config.jsの読み方、書き方
ECMAScript6で書こう!WebPackとES6-loaderで環境を作り、ES6を先取り体験する方法