Webpakの最も完全な簡単な入門

Webpackについて
Webpackとは
公式文書はこう紹介されています.点私は公式文書を知っています.
簡単に言えば、WebPackはモジュールパッケージング機と見なすことができます.それは、あなたのプロジェクト構造を分析し、JavaScriptモジュールや他のブラウザで直接実行できない拡張言語(Scss、Type Scriptなど)を見つけ、ブラウザで使用するために適切なフォーマットに変換し、パッケージングすることです.
WebpackはTobias Koppersによって開発されたオープンソースフロントエンドモジュール構築ツールである.基本的な機能は、モジュール形式で書かれた複数のJavaScriptファイルを1つのファイルにパッケージ化し、CommonJSとAMD形式をサポートすることです.しかし、ユニークなのは、異なるファイルフォーマットに対する前処理ロジックを定義する強力なloader APIを提供し、CSS、テンプレート、さらにはカスタムファイルフォーマットをJavaScriptモジュールとして使用することができます.Webpackはloaderに基づいて、自動ブロックパッケージングとオンデマンドロード、ピクチャリソースへの参照の自動位置決め、ピクチャサイズに応じてbase 64でインラインするかどうか、開発時のモジュールホットスワップなど、多くの高度な機能を実現することができ、現在、フロントエンドでリーダーシップを構築する最も競争力のあるソリューションの一つと言える.
WebpackとGrunt,Gulpの違い
WebpackはGulp、Gruntと比べ物にならないほど、モジュールパッケージと見なすことができ、あなたのプロジェクト構造を分析することで、JavaScriptモジュールや他のブラウザで直接実行できない拡張言語(Scss、Type Scriptなど)を見つけ、ブラウザで使用するために適切なフォーマットに変換し、パッケージ化することができます.Gulp/Gruntはフロントエンドの開発プロセスを最適化できるツールであり、WebPackはモジュール化されたソリューションであるが、Webpackの利点により、Webpackは多くのシーンでGulp/Gruntクラスのツールに代わることができる.
彼らの仕事のやり方にも大きな違いがあります.
GruntとGulpの動作は、1つのプロファイルで、いくつかのファイルに対して類似のコンパイル、組み合わせ、圧縮などのタスクの具体的なステップを指定し、ツールの後で自動的にこれらのタスクを完了することができます.
Webpackの動作は、あなたのプロジェクトを全体として、index.jsなどの特定のプライマリファイルを通じて、Webpackはこのファイルからあなたのプロジェクトのすべての依存ファイルを見つけ、loadersを使用して処理し、最後にブラウザで識別できるJavaScriptファイルにパッケージ化します.
インストール
npmインストール
Webpackはnpmでインストールでき、空のフォルダ(名前は勝手)を新規作成し、端末でそのフォルダに移動した後、以下のコマンドを実行すればインストールが完了します.

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

cnpmインストール
npmは国内でのインストールが遅いので、淘宝NPMミラーカスタムcnpm(gzip圧縮サポート)コマンドラインツールを使用してデフォルトのnpmの代わりに、まずcnpmをインストールすることができます.

npm install -g cnpm --registry=https://registry.npm.taobao.org
//  cnpm      
cnpm -v
//          ，       

上のnpmインストールを繰り返すことができます

//    
cnpm install -g webpack
//         
cnpm install --save-dev webpack

速度が速いことに気づきます
packageを作成します.jsonファイル
プロジェクトのルートディレクトリにpackageを手動で作成できます.jsonファイル、これは標準的なnpm説明ファイルで、現在のプロジェクトの依存モジュール、カスタムスクリプトタスクなど、豊富な情報が含まれています.端末においてnpm init(cnpm init)コマンドを用いる、このpackageを自動的に作成することができる.jsonファイル

cnpm init

このコマンドを入力すると、端末はプロジェクト名、プロジェクト説明、著者などの一連の情報を質問しますが、心配しないでください.npmでモジュールを公開する準備ができていない場合は、これらの質問の答えは重要ではありません.車に戻ってデフォルトでいいです(以下の図).
package.jsonファイルが準備できました.このプロジェクトではWebpackを依存パッケージとしてインストールします.

//   Webpack
cnpm install --save-dev webpack

ルートディレクトリの空のフォルダに戻り、2つのフォルダ、appフォルダとpublicフォルダを作成します.appフォルダは元のデータと私たちが書くJavaScriptモジュールを格納するために使用され、publicフォルダはブラウザが読み込むためのファイル(webpackパッケージを使用して生成されたjsファイルとindex.htmlファイルを含む)を格納するために使用されます.
次に、3つのファイルを作成します.

index.html--publicフォルダに配置されます.

Greeter.js--appフォルダに配置されます.

main.js--appフォルダに配置されます.

私たちはindexにいます.htmlファイルに最も基礎的なhtmlコード(htmlテンプレートページの前の記事で述べた)が書き込まれています.ここでは、パッケージ化されたjsファイルを導入することを目的としています(ここでは、後でパッケージ化されたjsファイルをbundle.jsと名付けます).

Greeter.jsにおいて、挨拶情報を含むhtml要素を返す関数を定義し、CommonJS仕様に従ってこの関数をモジュールとして導出した.

// Greeter.js
module.exports = function() {
  var greet = document.createElement('div');
  greet.textContent = "new webpack";
  return greet;
};

main.jsファイルには、Greeter で返されたノードをページに挿入するためのコードが書き込まれています.

//main.js 
const greeter = require('./Greeter.js');
document.querySelector("#root").appendChild(greeter());

これでは万事そろっているが,ただ東風に欠けているだけだ.
Webpackの実行
ターミナル運転
Webpackは端末で使用できますが、基本的な使用方法は以下の通りです.

# {extry file}          ，       main.js   ，
# {destination for bundled file}            
#            {}
webpack {entry file} {destination for bundled file}

エントリファイルを指定すると、Webpackはプロジェクトに依存する他のファイルを自動的に認識しますが、Webpackがグローバルにインストールされていない場合は、端末でこのコマンドを使用する場合は、node_modulesのアドレスは、上記の例に続き、端末に次のコマンドを入力します.

# webpack        
node_modules/.bin/webpack app/main.js public/bundle.js

実行後、次の実行結果が表示されます.webpackがmain.jsとGreeter,jsを同時にコンパイルしていることがわかり、index.htmlを開くと、次のような結果が得られます.
プロファイルによるWebpackの使用
Webpackには、コマンドラインモードで実現できる他の高度な機能(例えば、後述するloadersおよびplugins)がたくさんありますが、前述したように、これは便利ではなく、エラーが発生しやすいので、より良い方法は、簡単なJavaScriptモジュールでもあるプロファイルを定義することです.パッケージに関するすべての情報を入れることができます.
上記の例を続けて、このプロファイルを書く方法を説明し、現在の練習フォルダのルートディレクトリの下にwebpack.config.jsというファイルを新規作成します.ここでは、以下に示す簡単な構成コードを書きます.現在の構成では、主にエントリファイルパスとパッケージ後のファイルの保存パスに関連しています.

const path=require('path');
module.exports={
  //JavaScript      ,
  entry:'./app/main.js',
  //           path       filename
  output:{
    path:path.resolve(__dirname,'./public'),  //           
    filename: "bundle.js"//           
  },
  //  mode
   mode: 'development' //   mode
}

この構成があれば、ファイルをパッケージ化し、端末でwebpack( node_modules/.bin/webpack)コマンドを実行するだけでいいです.このコマンドは、webpack.config.jsファイルの構成オプションを自動的に参照します.例は次のとおりです.
2つ目の方法は正常に実行され、次により便利な方法を見ます.
プロファイルのオープン設定
コマンドラインにコマンド必要コードを入力するのはnode_modules/.bin/webpackのような経路が煩わしいが、幸いなことにnpmはタスク実行を導くことができ、npmを構成した後、コマンドラインで簡単なnpm startコマンドを使用して、上記のやや煩わしいコマンドに代わることができる.package.jsonにおいてscriptsオブジェクトを相関設定すればよく、設定方法は以下の通りである.

{
  "name": "webpack3",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^4.39.1"
  }
}

npmのstartコマンドは特殊なスクリプト名であり、その特殊性は、コマンドラインでnpm startを使用してその対のコマンドを実行することができ、対応するこのスクリプト名がstartではない場合、コマンドラインで実行するには、npm run {script name}、例えばnpm run buildを使用する必要があります.コマンドラインにnpm startを入力してみます.
Webpack-cliをインストールするプロンプトが表示されたらyesを入力し、Webpack-cli依存をインストールします.
まとめ(まとめの流れ)
まず空のフォルダを作成し、コマンドでwebpackをグローバルにインストールします.

//    
npm install -g webpack
//  --    ，     
cnpm install -g webpack

次に、ファイル・ルート・ディレクトリを初期化し、依存関係をインストールします.

npm init  //      
npm install --save-dev webpack //   Webpack

そしてあなたのプロジェクトを作成します

eg：          src   ，src              js，css 
              public   ，      html                js  ，                   js     bundle.js

ルートディレクトリの下でwebpackを作成して構成します.config.jsファイル

const path=require('path');
module.exports={
  //JavaScript      ,
  entry:'./src/js/main.js',
  //           path       filename
  output:{
    filename:'bundle.js',   //        
    path:path.resolve(__dirname,'./public/js')  //           
  },
  //  mode
   mode: 'development' //   mode
}

ルートディレクトリの下でwebpackを実行します

webpack

出力に成功したら、htmlファイルを開くと、完全なプロジェクトが表示されます!