ホームページ > 記事 > ウェブフロントエンド > デモのセットアップとWebpack環境の構成方法の紹介
デモのセットアップとWebpack環境の構成方法の紹介
- 不言オリジナル
- 2018-08-18 15:15:332482ブラウズ
この記事では、Webpack 環境を構成するためのデモをセットアップする方法を紹介します。必要な方は参考にしていただければ幸いです。
1. デモを作成します
2. 作成した webpack_demo ディレクトリに入り、dist フォルダー (運用環境用) と src フォルダー (開発環境用) を作成します
src フォルダー: JavaScript コードを作成するために使用します。単に JavaScript で書かれたモジュールとして理解してください。
dist フォルダー: ブラウザーが読み取るためのファイルを保存するために使用されます。これは webpack によってパッケージ化されたファイルです。
3. プログラム ファイルを作成します:
dist ファイルの下に Index.html ファイルを手動で作成します
/dist/index.html
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>webpack</title></head><body>
<p id="title"></p>
<script src="./bundle.js"></script></body></html>説明: Bundle.js ファイルはここで紹介されており、生成できます。後で webpack を使用して、entry.js エントリ ファイルを作成します
/src/entry.js:
document.getElementById(‘title’).innerHTML=’Hello Webpack’;
-
次に、ターミナルで webpack src と入力します。 vs code /entry.js dist/bundle.js 実行に成功すると、distディレクトリにbundle.jsファイルが生成され、ブラウザにHello Webpackの情報が表示されます
2. : webpack src/entry.js –output dist/bundle.js –modedevelopment
dist ディレクトリに Bundle.js ファイルが生成されます
live-server をグローバルにインストールします:npm install -g live-server
インストールが完了したら、次を実行しますターミナルの live-server と Hello がブラウザに表示されます Webpack 情報
関連する推奨事項:
コマンドラインを使用して Webpack をインストールする手順CSS セレクターとは何ですか? CSSセレクターの使い方まとめ
以上がデモのセットアップとWebpack環境の構成方法の紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。