webpack
Webpackの使い方
サーチ…
使用法CommonJSモジュールの例
フォルダーを作る。コマンドラインで開きます。 npm install webpack -g実行します。 2つのファイルを作成する：
cats.js：
var cats = ['dave', 'henry', 'martha'];
module.exports = cats;
app.js
cats = require('./cats.js');
console.log(cats);
コマンドラインで実行： webpack ./app.js app.bundle.js
今すぐフォルダ内にapp.bundle.jsというファイルがあります。 index.htmlページに含めることができ、ブラウザで開き、結果をコンソールで見ることができます。
しかし、より速い方法はコマンドラインで実行されnode app.bundle.js ： node app.bundle.jsとすぐにコンソールで結果を参照してください：
['dave'、 'henry'、 'martha']
使用法AMDモジュールの例
フォルダーを作る。コマンドラインで開きます。 npm install webpack -g実行します。 2つのファイルを作成する：
cats.js：
define(function(){
return ['dave', 'henry', 'martha'];
});
app.js
require(['./cats'],function(cats){
console.log(cats);
})
コマンドラインで実行：
webpack ./app.js app.bundle.js
今度はフォルダ内にfile： app.bundle.jsがあります。
index.htmlファイルを作成する：
<html>
<body>
<script src='app.bundle.js' type="text/javascript"></script>
</body>
</html>
ブラウザで開き、コンソールに結果を表示する：
['dave'、 'henry'、 'martha']
使用法ES6（Babel）モジュールの例
2016年7月にMDNに書かれています。
この機能は現時点ではネイティブにはどのブラウザにも実装されていません。 Traceur Compiler、Babel、Rollupなどの多くのトランスパイライザで実装されています。
そこで、WebpackのBabelローダーの例を示します。
フォルダーを作る。そこにpackage.jsonファイルを追加してください：
{
"devDependencies": {
"babel-core": "^6.11.4",
"babel-loader": "^6.2.4",
"babel-preset-es2015": "^6.9.0",
"webpack": "^1.13.1"
}
}
コマンドラインでフォルダを開きます。実行：
npm installます。
2つのファイルを作成する：
cats.js ：
export var cats = ['dave', 'henry', 'martha'];
app.js ：
import {cats} from "./cats.js";
console.log(cats);
babel-loaderを適切に使用するには、 webpack.config.jsファイルを追加する必要があります。
module: {
loaders: [
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel?presets[]=es2015'
}
]
}
コマンドラインで実行：
webpack ./app.js app.bundle.js
今度はフォルダ内にfile： app.bundle.jsがあります。
index.htmlファイルを作成する：
<html>
<body>
<script src='app.bundle.js' type="text/javascript"></script>
</body>
</html>
ブラウザで開き、コンソールに結果を表示する：
['dave'、 'henry'、 'martha']
使用法ES6（Typescript）モジュールの例
2016年7月に[MDN] [1]に書かれているように、
この機能は現時点ではネイティブにはどのブラウザにも実装されていません。 Traceur Compiler、Babel、Rollupなどの多くのトランスパイライザで実装されています。
WebpackのTypescriptローダーの例です：
// TODO
この記事の簡略化されたバージョンを作成してください： http ://www.jbrantly.com/typescript-and-webpack/ tsdとjqueryなし。