webpack 3零基礎入門教程〹1-紹介

1.webpackは何ですか?
まず、webpackとは何ですか?webpackの公式は、このように定義されている.webpack is a module bundler.Itsmann purpose is to bundle JavaScript files for usage in a browser,yet it is also capable of transforming,bundling,or packaging just able or asset.
中国語の大体の意味は次の通りです.webpackは、モジュールパッキングマシンと見なすことができます.これは、あなたのプロジェクト構造を分析し、JavaScriptモジュール及び他のブラウザのいくつかが直接に実行できない拡張言語(Scss、TypeScriptなど)を見つけ、それを変換し、パッケージ化して適切なフォーマットにして、ビューアに使用させます.
大きな口語でこう言ってもいいです.webpackは先端モジュール化方案であり、より側重モジュール包装であり、開発中のすべての資源(ピクチャ、jsファイル、cssファイルなど)をモジュールとして見なすことができ、loader(キャリアアップ)とplugins(プラグイン)を通じて資源を処理し、生産環境の配置に合う先端リソースに包装することができます.
もしまだ分からないなら、原因と結果を話します.
今の社会では、web開発として、フロントエンドの重要性がますます認識され、HTML5、CSS3、ES6の様々な技術の発展に伴って、フロントエンドの開発がますます人気を集めています.一部のアプリケーションは単一ページアプリケーション(SPA)であり、純JavaScriptが開発し、JavaScriptファイルの管理も問題である.JavaScriptはモジュール化されたプログラミングで、すでに切実な需要となりました.これはJavaScriptのモジュールソリューションが現れました.以前はrequirejsまたはseajsを使っていましたが、今はwebpackを使っています.
例えば、多くの人が様々な優れたJavaScriptモジュールやコンポーネントを開発しています.私たちは車輪を発明したくないです.直接に他の人のモジュールを利用したいです.つまり、requireやincludeのような仕組みで、他の人のモジュールを導入しますが、JavaScriptは や という概念がないです.どうすればいいですか?
どのように他の人のモジュールを導入しますか?導入後は、様々な依存関係を間違いなく保証しますか?これはwebpackの解決すべき問題です.
モジュール化の概念を理解しましたが、 という言葉はどう分かりますか?
実は、モジュール化された問題が解決されたら、webpackは各種のリソースモジュールを一つのファイルにまとめてブラウザに出力することができます.これらのリソースは、包装中に処理されてもよく、例えば圧縮による体積の低減、sassをcssにコンパイルし、coffeeをjsにコンパイルする.したがって、ある程度はgrunt/gulpの機能と同じです.grunt/gulpとの違いについては、以下に述べる.
2.grunt/gulpとの違いgrunt/gulpの定義はTask Runnerである.rubyのRakeまたはThorに似ています.もしあなたがrubyを知らないなら、c/cpp言語のmakeはよく知っているはずです.これは任務を書く道具です.grunt/gulpはJavaScriptでtaskを書くだけです.grunt/gulpは、フロントエンド開発のワークフローを強調し、一連のtaskを構成することによって、task処理のトランザクション(例えば、ファイル圧縮合併、スプライト図、起動server、バージョン制御など)を定義し、実行順序を定義して、grunt/gulpにこれらのtaskを実行させ、プロジェクトのフロントエンド開発フロー全体を構築することができる.

const gulp = require('gulp');
const babel = require('gulp-babel');

// gulp.src       ，     pipe              ，   gulp.dest            。
gulp.task('default', () =>
    gulp.src('src/app.js')
        .pipe(babel({
            presets: ['es2015']
        }))
        .pipe(gulp.dest('dist'))
);

例えば、あなたの工程モジュールが簡単に依存しているなら、jsや各種の資源を梱包する必要はなく、簡単な合併、圧縮だけが必要であれば、webpackは必要ありません.grunt/gulpで十分です.逆に、もしあなたのプロジェクトが巨大で、ページに多くのライブラリが使用されているならば、webpackを選択して使用することができます.これはモジュール化管理もできますし、圧縮などの機能もできるし、grunt/gulpをcoffeescriptに変換することもできます.jsもgulpと組み合わせることができ、webpackの中にwebpack-streamプラグインがあります.gulpにmodule dependencyを専門にさせ、webpackファイルを生成し、bundle.jsで他の雑多なminify、uglifyを作らせることです.その後、gulpにwebpackのオプションがあることが分かり、pluginsを介して生成されたloaderをさらに処理するために使用され、対応するプラグインが書かれているので、minify/uglifyを生成し、hashを生成する作業もbundle.js自体に移行し、webpackの部分の市場シェアを押しつぶすことができる.その後、gulpの中のscriptsがちゃんと使われていることが分かりました.ジョブを呼び出した時に直接に簡単な命令を書きました.npm/package.jsonは各種プラグイン命令の組み合わせではないです.ですから、今見ている多くの新しいプロジェクトは全部gulpの中のscriptsです.外部はgulp/gruntだけでいいです.(ネットワークhttps://segmentfault.com/q/10...から)
最後にまとめます.
先端自動化構築ツールですが、彼らの位置づけを見れば対等ではないことが分かります.package.jsonは厳密に言えば、モジュール化は彼が強調するものではなく、先端開発プロセスを規範化することを目的としている.webpackはさらにモジュール化開発を強調し、それらのファイルの圧縮合併、前処理などの機能は彼に付随する機能にすぎない.
3.Browserifygrunt/gulpはwebpackと比較するよりも、webpackと比較するほうがいいです.両者はより近いですが、grunt/gulpはBrowserifyによって代替されるべきでしょう.
3.優勢

Browserifyは、jsを処理するだけでなく、cssを処理することもでき、htmlを処理することもできます.さらには、ピクチャなどの様々な先端リソースです.

それは開発が便利で、1つの構成ファイルだけを使って、部分webpackの仕事に取って代わることができます.例えば、包装、圧縮混淆、写真転送base 64などです.

は拡張性が強く、プラグイン機構が完備されている.

4.なぜ勉強しますか?
今最も流行っているBrowserify、webpack、grunt/gulpなどの技術を勉強して使ってみてください.