ビルドに環境をWebPACKの

-Y NPMのinit 1.
2. SRC作成し
　　たindex.htmlの作成2.1
　　2.2メインの.jsを

設定webpack.config.jsを作成します3。

VaRのパス=必要とする（ 'パス' ）

module.exportsは = { 
    エントリ：path.join（__ DIRNAME、」./src/main.js '）、   // 入口
    出力：{ 
        パス：path.join（__ DIRNAME、 ' ./ DIST '）、   // 出力パス 
        名：' bundle.js'   // 指定されたファイル名
    } 
}

WebPACKのWebPACKの-CLI --save 4. NPMをインストール -dev（WebPACKのと4のWebPACKのWebPACK-CLIが分離された後、インストールする必要がある）
5. I WebPACKのNPM-DEV-Serverの-D
6.コンパイラパッケージ./node_modules/を。ビン/ WebPACKの、パッケージはbundle.jsを生成します。

7. WebPACKの-devのサーバーの構成package.jsonの追加DEVをインストールした後：

"DEV"： "のWebPACK-devのサーバー--open --port 3000 --contentBase SRC --hot"

{
   "名"： "研究" 、
   "バージョン"： "1.0.0" 、
   "説明"： "" 、
   "メイン"： "index.js" 、
   "スクリプト" ：{
     "テスト"： "エコー\"エラー：なしテストは"出口1" && \指定されていない、
     "WebPACKの-DEV-サーバ--open --port 3000 --contentBase SRC --hot"： "DEV" 
  、}
   "キーワード" ：[]、
   "著者"、" " 、
   "ライセンス"： "ISC" 、
   "devDependencies" ：{
     "のWebPACK"： "^ 4.41.5" 、
    "WebPACKの-CLI"： "^ 3.3.10" 、
     "WebPACKの-devのサーバー"： "^ 3.10.1" 
  } 
}

8. DEVと実行、bundle.jsファイルは、熱後に更新されます。httpので：// localhostを：3000 / bundle.js（メモリ動作）、スクリプトファイルには、パスを変更する必要があります

<！DOCTYPE HTML> 
<HTML LANG = "EN"> 

<HEAD> 
    <メタ文字コード= "UTF-8"> 
    <META NAME = "ビューポート"コンテンツ= "幅=装置幅、初期の規模= 1.0"> 
    <メタHTTP-当量= "X-UA-互換性のある"コンテンツ= "IE =エッジ"> 
    <タイトル>ドキュメント</ TITLE> 


    <！ - <スクリプトSRC = "./ DIST / bundle.js"> </ SCRIPT> - > 
    < -热更新后的bundle.js文件处于ます。http：！// localhostを：3000 / bundle.js - > 
    <スクリプトSRC = "/ bundle.js"> </ SCRIPT> 
</ HEAD> 

<ボディ> 
    の<div> 
        <UL> 
            
            <LI> 1 </ LI>
            <LI> 2 </ LI> 
            <LI> 3 </ LI> 
            <LI> 4 </ LI> 
            <LI> 5 </ LI> 
            <LI> 6 </ LI> 
            <LI> 7 </ LI> 
            <LI> 8 </ LI> 
            <LI> 9 </ LI> 
            <LI> 10 </ LI> 

        </ UL> 

    </ div> 
</ body> 

</ HTML>

9.保存したコードは、手動でページを更新するには、HTML-のWebPACK - プラグインのプラグインをインストールすることができ、この時間が必要後に発見されました。（HTML-のWebPACK - プラグインのHTMLメモリは自動的にスクリプトを呼び出しますインストールした後）

おすすめ