デモのセットアップとWebpack環境の構成方法の紹介-CSSチュートリアル-php.cn

デモのセットアップとWebpack環境の構成方法の紹介

不言

リリース： 2018-08-18 15:15:33

オリジナル

2563 人が閲覧しました

この記事では、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 をグローバルにインストールします: