WebPack実験

8605 ワード
webpack babel テキストリンク

n/a.ターゲット


今回の目標はWebPackを利用してReactを設定することです.CRAより難しいですが、長い目で見れば、この方法は勉強に役立つと思います.

1.npm init


npm initを使用して初期化します.
npm init

2.webpackのインストール


2つの設定が必要です.webpck, webpack-cli
npm i -D webpack webpack-cli
インストール後にパッケージングします.jsonにdevDependenciesがインストールされているのが見えます.

3.distフォルダの作成


distフォルダにwebpackバインドの結果を表示します.これによりdistフォルダが作成されます.

4.webpack.config.jsファイルの作成


ルートフォルダベースのwebpack.config.jsファイルを作成します.

5.srcフォルダの作成


srcは、jsxおよびjsファイルを1つの場所で管理するために作成されます.

6.webpack.config.jsエントリ設定


entryはバインドする起動ファイルです.複数のファイルを起動ファイルとして指定できますが、現在はです./src/main.jsファイルで試してみる
そしてmode設定開発.
module.exports ={
    mode : 'development',
 	entry : {
    	main : './src/main.js'
    }
}

7.srcのコール。js, main.jsの作成


下図に示すように、srcの下部にそれぞれファイルを作成します.

各ファイルの内容は以下の通りです.
//Cal.js
class Cal{

    static plus(a,b){
        console.log(`a + b = ${a+b}`)
    }
}
export default Cal
Cal.jsを主とする.jsをインポートします.
//main.js
import Cal from "./Cal";

Cal.plus(1,2);

8. package.jsonにwebpackコマンドを登録する


package.jsonのscriptsセクションにwebpackコマンドを登録します.
{
  .
  .
  .
  "scripts":{
  	 "dev": "webpack"
  }
  .
  .
  .
}

9.端末に対してコマンドを実行する。

npm run dev

以上のコマンドがTerminalで完了したら、distフォルダの下にあるmain.jsファイルがあるはずです.
次の図はdistフォルダの下にあるmainを示しています.jsファイルの様子.

「エラー」がなければ、下図のような状況になります.

10. index.htmlにバインドされたjsのインポート


まずsrcフォルダの下のindexhtmlを生成します.
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>웹팩 테스트</title>
</head>
<body>
    
    <script src="../dist/main.js"></script>
</body>
</html>
実際のインデックス.htmlを開くと呼び出されます.jsのplus関数が実行されていることがわかります.
下図のように開発者ツールで確認できます.

ポスト


次にwebpackにreactをインストールして拡張開発を行います.
拙劣なコード日記21.7.9()
YYCacheソースコード解析ノート(一)