Webpack入門の簡単な例が走り出す

Webpackの紹介
Webpackは現在最も人気のあるフロントエンドリソースのモジュール化管理とパッケージングツールであり、多くのばらばらなモジュールを依存と規則に従って生産環境の配置に合致するフロントエンドリソースにパッケージングすることができ、また、必要に応じてロードされたモジュールをコード分割し、実際に必要に応じて非同期ロードすることができる.
WebpackはGruntやGulpと比べてどんな特性がありますか?
Gulp/Gruntはフロントエンドの開発プロセスを最適化できるツールであり、WebPackはモジュール化されたソリューションであるが、Webpackの利点により、WebpackはGulp/Gruntクラスのツールに代わることができる.
GruntとGulpの動作は、1つのプロファイルで、あるファイルに対して類似のコンパイル、組合せ、圧縮などのタスクを行う具体的なステップを示すことです.
Webpackの仕事の方式は:あなたのプロジェクトを1つの全体として、1つの与えられたメインファイル(例えば:index.js)を通じて、Webpackはこのファイルからあなたのプロジェクトのすべての依存ファイルを見つけて、loadersを使ってそれらを処理して、最後に1つのブラウザにパッケージして別のJavaScriptファイルを認識することができます.
両者を比較すると、Webpackの処理速度はより速く、より直接的で、より多くの異なるタイプのファイルをパッケージ化することができます.
Webpackの使用を開始
Node.jsは必須のツールで、NPMのバージョンは3が望ましい.xバージョン以上、NPM 3.xは、より効率的なパケット依存管理を提供します.
webpackはnpmでインストールします.

//    npm install  webpack -g//         npm install  webpack --save-dev

1.フォルダwkdemoを新規作成し、npm install webpack--save-dev
(package.jsonファイルを先に作成すべきであることがわかります(/□))
2.package.jsonファイルの準備は、npm initコマンドを使用して自動的にこのpackageを作成することができる.jsonファイル
 View Code
3.webpack.config.jsファイルの準備
 View Code
4.index.htmlの最も基礎的なhtmlコード、その唯一の目的はパッケージ化したjsファイル(bundle.js)をロードすることで、経路に対応することに注意します
 View Code
Webpack.config.jsファイル:

//        
    entry: [      // 'webpack/hot/only-dev-server',
      "./js/app.js"
    ],

ファイルjs/appを作成する必要があることがわかる.jsをエントリファイルとして使用します.
5.エントリファイルapp.js準備

//app.jsvar greeter = require('./hello.js');
document.getElementById('root').appendChild(greeter());

ここでは同じディレクトリの下にhelloが参照されています.jsファイル
6.hello.jsファイルの準備

// hello.jsmodule.exports = function() {  var greet = document.createElement('div');
  greet.textContent = "Hi there and greetings! hello world12345";  return greet;
};

7.webpackの実行
 
8.indexを実行します.html
最後に、ディレクトリ構造を見てみましょう.