初心者向けのガイド

22017 ワード
100daysofcode javascript codenewbie webpack テキストリンク
ノード環境では、モジュールを使用する“CommonJets”モジュールシステムがあります.エクスポート/各ファイル(または“モジュール”)の部品を分離する必要があります.ES 6まではブラウザのコードに「モジュール」が組み込まれていませんでした既定では、HTMLドキュメントの各スクリプトは順番に実行され、1つのスコープを共有します.
入力.webpack!

からWebpack 5 docs :

Webpack is a bundler for modules. The main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any resource or asset.


これはどういう意味ですか.ノードで小さなJavascriptプログラムを構築することによって、行動中のWebpackを見ましょう.

セットアップ
NPMと新しいプロジェクトを作成し、インストールwebpack and webpack-cli .
mkdir hello-webpack && cd hello-webpack
npm init -y
npm install --save-dev webpack webpack-cli
さて、ルートフォルダ内でディレクトリを作りますsrc and public . The src フォルダは、私たちの未処理のソースコードを保持し、我々はWebpackpublic フォルダ.また、ファイルを作成する必要がありますwebpack.config.js - 後でそれ以上.プロジェクトは次のようになります.
hello-webpack/
├── src/
├── public/
├── webpack.config.js
└── package.json

パッケージ.JSON
{
  "name": "hello-webpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^4.43.0",
    "webpack-cli": "^3.3.11"
  }
}

パブリックインデックス.HTML
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <script src="../src/game.js" defer></script>
  <script src="../src/main.js" defer></script>
  <link rel="stylesheet" href="style.css" />
  <title>Click Me</title>
</head>
<body>
  <button id="button">Click Me!</button>
</body>
</html>

パブリックスタイル.CSS
button {
  height: 300px;
  width: 300px;
  font-size: 40px;
  background-color: goldenrod;
  color: white;
  border-radius: 50%;
  cursor: pointer;
}

SRC/ゲーム.js
  let numTimesClicked = 0;

  function win() {
    alert('You win!');
    reset();
  }

  function reset() {
    numTimesClicked = 0;
  }

  function click() {
    numTimesClicked++;
    console.log(`You've been clicked!`);
    if (numTimesClicked === 10) win();
  }

src/mainjs
const button = document.getElementById('button');

button.addEventListener('click', function() {
  click();
});

なぜWebpackが必要ですか?
コマンドラインからopen public/index.html . あなたは黄色のボタンを参照してください.クリックすると、ボタンがコンソールにメッセージをログ出力します.ボタンを10回クリックすると、アラートを知っているポップアップする必要があります-あなたが勝った!すごい!我々は完了です!
ジャスト冗談.あなたを見てくださいindex.html ファイル.7行目と8行目にdeferキーワードを含まない場合はどうなりますか?あなたのJavaScriptファイルを再注文する場合はどうですか?
<!-- remove 'defer' from lines 7 and 8 -->
<!-- re-order 'game.js' and 'main.js' -->
  <script src="../src/main.js"></script>
  <script src="../src/game.js"></script>
閉じるこの動画はお気に入りから削除されています.

ええああ私が最初に言ったことを思い出してください.The defer 属性は、ブラウザがHTMLファイルを読み込み後に特定のJavaScriptファイルを実行しないように指示します.なしでdefer , JavaScriptはHTMLロードと同じように実行します.そして、あなたのメインのコードならば.JSのファイルは、ゲームのコードの前に実行されます.あなたのプログラムは、定義される前に' click () '関数を実行しようとします.
これがコンソールにエラーがある理由です.

Webpackでモジュールを束ねる
我々がなぜWebpackを必要とするかについてわかっている今、行動でそれを見ましょう.
Webpackはモジュールバンドルです.その目的は、依存関係を追跡することでアプリケーションを処理し、ブラウザで実行できるファイルを一つ以上のファイルにまとめます.ノードのアプリと同じように普遍的にpackage.json , Webpackを設定しますwebpack.config.js ファイル.

webpack設定.js
WebPackはいくつかの主要コンポーネントに基づいています.エントリポイント、出力場所、loaders , and plugins . 私はエントリーと出力に集中するだけです、しかし、より大きなプロジェクトのためにWebPackを構成するとき、あなたは間違いなく他の2を使います.

WebPackが構築を開始するJavaScriptファイル.
module.exports = {
  entry: './path/to/my/entry/file.js'
};

出力:バンドルされたJavaScriptの名前とパス.
const path = require('path');

module.exports = {
  entry: './path/to/my/entry/file.js', // the starting point for our program
  output: {
    path: path.resolve(__dirname, 'directory_name'), // the absolute path for the directory where we want the output to be placed
    filename: 'my-first-webpack.bundle.js' // the name of the file that will contain our output - we could name this whatever we want, but bundle.js is typical
  }
};
あなたwebpack.config.js ファイルは次のようになります.
const path = require('path');

module.exports = {
  mode: "development", // could be "production" as well
  entry: './src/main.js', 
  output: {
    path: path.resolve(__dirname, 'public'), 
    filename: 'bundle.js' 
  }
};

NPMスクリプト
Webpackの設定があるので、パッケージにNPMスクリプトを追加する必要があります.JSON私たちは欲しい単語を選ぶことができます.単に「webpack」を使うことができますWebpackが変更とホットリロードファイルを監視したい場合は、「- w」フラグを最後に追加することができます.(この手順を実行しなかった場合は、実行するたびに、コマンドラインからWebpackのローカルコピーを実行する必要があります).
NPMスクリプトは次のようになります.
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --w"
  },
現在先に行くと彼女を火!
ええ?これは私のコンソールでは何ですか.

それはあなたの最初の束です.あなたのコンソールのメタデータは、あなたの束がどれくらい大きいかについてあなたに話します.すごい!これで、ESモジュールを使用できます.これは、あなたのプログラムが大きくなるにつれて、JavaScriptファイル間で関数をインポートおよびエクスポートできます.クール!

ウェブにもたらす
もう少しで済んだ.Webpackをメインにバンドルしました.JS 'ファイルと出力'束.我々の/公共ディレクトリのJSのファイル.
今、我々はJavaScriptのESモジュールを使用することができます.どうやってclick 関数はブラウザに存在する前に呼び出されました.今、我々は使用することができますexport and import それをエクスポートする構文game.js そしてそれをmain.js , 完全にこの問題を避けること.このように:

ゲーム.js
// below the click() function
export default click;

メイン.js
// at the top of main.js
import click from './game'
最後に、HTMLファイルに小さな変更を加える必要があります.Webpackを知る前にindex.html つの別々のJavaScriptファイルをロードしました.さて、これらのファイルのコードはすべてパッケージ化されましたbundle.js - ですから、スクリプトのタグをbundle.js .
先を参照してスクリプトのタグを置き換えるbundle.js :
  <!-- <script src="../src/game.js" defer></script>
  <script src="../src/main.js" defer></script> -->
  <script src="bundle.js" defer></script>
さて、実行open public/index.html .
あなたのプログラムは、以前と全く同じように見えて、機能しますか?すごい!あなたは、すべてを正しました.
あなたのdevtoolにのぞき見をして、『源』タブに移動してください.をクリックすることができますbundle.js そして、あなたの美しくバンドルされたJavaScriptを観察してください.きちんと!


私たちは何を学びましたか.
Webpackは、1つのきちんとしたファイルにあなたのJavaScriptファイルのすべてをパッケージ化するバンドルツールです.私たちは学んだ.
  • WebpackはあなたのJSコードをつなぎます
  • つの主要な概念は、エントリと出力です
  • Webpackの設定方法設定.js
    • 大仕事!あなたはそんなに多くを学びました、そして、まだ、まだ学ぶことはそんなに多くあります.ここから、コンパイラについて読みたいBabel . Webpackは一般的に古いブラウザで最新のJavaScriptシンタックスを転送するためにBabelと共に使用されます.また、WebPackがCSSファイル、コード分割、およびその他の楽しいことを処理する方法についても読むことができます.また、その種類の唯一のツールではない-あなたは見てみることができるgrunt , gulp , or browserify .

    ハッピーコーディング!👋


    *“インポート”と“エクスポート”キーワードはES 6で導入され、それはまだ普遍的ではありませんが、これらのネイティブブラウザのサポートがあります.ESモジュールをネイティブにロードするには、type="module" スクリプトタグの属性.しかし、これは多くのHTTPリクエストとしてあなたのHTMLファイルにJavaScriptファイルがあるようになります.あなたのアプリケーションが成長するにつれて、あなたはそれに対処したくないので、バンドルとトランジスターについて知っているのはまだ良い考えです.

    **からMDN : 'このBoolean属性は、ドキュメントがパースされた後にスクリプトが実行されることを意図しているブラウザに対して指定されていますが、DomContextを起動する前に設定されます
    Android開発ノート(四十七)Runnableインタフェースマルチスレッド実現
    トランザクションの独立性レベル