ホームページ > 記事 > ウェブフロントエンド > webpack3.xのエントリ、出力、モジュール解析
webpack3.xのエントリ、出力、モジュール解析
- php中世界最好的语言オリジナル
- 2018-03-10 13:56:071929ブラウズ
今回はwebpack3のエントリー、出力、モジュールの分析をお届けします。
現在人気のツールである webpack は 3 つの主要なフロントエンド フレームワークと切り離せないため、それを学習する必要があります
前提条件: ノード環境と npm ツールが存在します (新しいバージョンのノードには付属しています。 npm tools);
ステップバイステップで始めましょう:
1. まず、プロジェクトが保存されている場所としてディレクトリを選択します
cmd ツールを使用してプロジェクト ディレクトリに入ります (私の場合は D: webpack-demo4)。 ; 次に、nmp
を使用してwebpack をインストールします: npm install webpack --save-dev ("グローバル インストールは推奨されません"); 完了したら、必要に応じて、npm init を使用してプロジェクト ディレクトリに移動します。省略するには、単に npm init -y; を実行します。 dist ディレクトリと src ディレクトリは独自に作成され、dist はコンパイルされたファイルを保存するために使用され、src はさまざまなファイルを含む新しく初期化されたフォルダーです。将来プロジェクトの構築に関連するモジュールがすべてこのディレクトリに配置されます。webpack.config.js は Webpack 構成アイテムです。package.json はノード操作用の構成です。実際、これは webpack 用です);
Webpack.config.js 構成 (当面はこれだけです); まず最初に、この構成が実際にどのように使用されるかを説明します。パッケージ; 1 つずつ説明します。
エントリ: ファイルの先頭を意味します。これは、cmd コマンド ラインでディレクトリを入力したときに計算されます。たとえば、私のものは次のとおりです:
もちろん、webpack を実行する前に npm install style- が必要です。 -dev と npm install file-loader --save -dev; インストールするときは、webpak-demo4 ディレクトリに移動する必要があります
これで、次のように、index002.html が dist ディレクトリに作成されました。
src ディレクトリには 2 つの js ファイルがあります。<html>
<head>
<title>Output Management(输出)</title>
<meta charset=utf-8>
</head>
<body>
</body>
</html>
<script src="./js/app.bundle.js"></script> 重要なことについて話しましょう。 import '../css/style1.css' は、index.js style1.css の相対的なディレクトリの下にあります。 ; たとえば、ボディの背景を青に書きました。また、img の下に画像を保存しました。次に、cmd コマンド Webpack に画像と print.js をそれぞれ導入しました。 ; 画像とスタイルが表示されます; dist ディレクトリを確認すると、パッケージ化された js と画像が表示されます
この例を読んだ後、あなたはこの方法を習得したと思います。の記事、さらにエキサイティングなコンテンツについては、php 中国語 Web サイトの他の関連記事にご注意ください。
関連記事:
VUE で anmate.css を使用する方法IE11 CSS ハックを解決する方法
以上がwebpack3.xのエントリ、出力、モジュール解析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。