Webpack Academy Cencle 0 : Webpackとは何か

私の新しいアカデミー、Webpackアカデミーへようこそ!
私は私のwebpackの知識を共有しようとします!
始めましょう!

高速プレゼンテーション
Webpackのdoc :

At its core, webpack is a static module bundler for modern JavaScript applications. When webpack processes your application, it internally builds a dependency graph which maps every module your project needs and generates one or more bundles.

要約すると、Webpackは、プロジェクトのファイルのインポート/エクスポートを処理するのに役立ちます.

なぜwebpackを使用しますか?
あなたがJavaScriptプロジェクトを構築したならば、あなたは今あなたのアプリケーションで242479142の輸入ファイルに関する問題をすべきです!
私はあなたに私たちが前にしたことを簡単に説明します!

<script src="jquery.min.js"></script>
<script src="jquery.some.plugin.js"></script>
<script src="main.js"></script>

すべての依存関係を1つで242479142にインポートする必要があります.もし新しいlibをインポートしたいなら、jsにインポートする必要があります.なぜなら、この新しいlibがcorrect orderに依存しているなら、インポートcorrect order以降にインポートする必要があるからです.
あなたはそれを扱うことができると思うはい、あなたが100ポンドをインポートする必要がある場合は、想像することができます、これはカオスすることができます.
この時点で手動でバンドルファイルを作成します

// build-script.js
const scripts = [
   "jquery.min.js",
   "jquery.some.plugin.js",
   "main.js",
].concat().uglify().writeTo("bundle.js")

<script src="bundle.js"></script>

我々はスクリプトの複数のインポートを修正しますが、LIBSの間の依存関係を修正しないでください.

ウェブ+パック
Webpackはjqueryとjqueryファイルをネイティブにファイルします.しかし、次の記事でどのように他のファイルハンドラを参照してください!
Webpackにエントリポイントを与えるだけで、依存関係ツリーを作成します🌳 このファイルから他のすべてのファイルをチェック!
今から、我々の手で依存関係の順序を処理する必要はありません!

例
コンテキスト:1つの変数をエクスポートする2つのファイルがあります.
ファースト.js

export const first = 1

第二にjs

export const second = 2

両方のファイルをインポートする別のファイルがあります
三つ.js

import { first } from './first'
import { second } from './second'

export const three = first + second

そして最後にコンソールになるメインファイル.ログを.js変数
メイン.js

import { three } from './three'

console.log(three)

古いヒントでは、次のように使います.

// build-script.js
const scripts = [
   "one.js",
   "second.js",
   "three.js",
   "main.js",
].concat().uglify().writeTo("bundle.js")

<script src="bundle.js"></script>

しかし、.jsonでは、依存関係を処理する必要はありません.threeでコードを実行しましょう

const path = require("path")

const config = {
    mode: "development",
    // Webpack start from this entry point
    entry: {
        myApp: [
            "./src/main.js",
        ],
    },
    // This is the output of Webpack
    output: {
        // From current folder + dist folder that will contains all bundle
        path: path.resolve(__dirname, "dist/"),
        filename: "bundle.js"
    },
}

module.exports = config

このwebpackによって恐れてはいけません、アカデミーの間、我々は数を加えて、変えます、しかし、終わりはすべての線を理解します!
この設定を要約するには、プロジェクトのエントリポイントwebpack.config.jsを示します.出力ファイル名とパスを示します.
走れ!( Webpack CLIをインストールする前に
そして、最後にdistフォルダに行って、config fileファイルをチェックしてください.
試してみる

node dist/bundle.js
3

はい、それは仕事です!
試したいなら、このコミットからリポジトリを取ってきてください!👇
https://github.com/Code-Oz/webpack-academy/tree/e49ca8d675b985551ec98dcf572edbfa07db4e33
私はあなたのアカデミーでwebpackについてもっと知りたいと思います!
閉じるこの動画はお気に入りから削除されています.
🎁 あなたが私とMP私に続くならば😁
またはそれを得るHERE
🎁 MY NEWSLETTER
☕️ あなたはSUPPORT MY WORKS🙏
🏃‍♂️ あなたは私に従うことができます👇
🕊 Twitter
👨‍💻 ギタブ:https://github.com/Code-Oz
そして、あなたは🔖 この記事!