Bundler(Webpack-01.プロジェクトの作成)

5756 ワード
テキストリンク

1. Webpack

  • 非常に注意深い構成
  • 中/大型プロジェクトの理想的な選択

    • 2.プロジェクトの作成


    01.npmプロジェクト生成(package.json)

    npm init -y

    02.webpackインストール(package-lock.json)

  • インストール時webpack-dev-server@next主なバージョンをwebpack-cliと一致させる必要がある(@next)
    • npm i -D webpack webpack-cli webpack-dev-server@next

    03. package.jsonを修正!


    {
  "name": "wepack-template-basic",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev" : "webpack-dev-server --mode development", // 개발서버실행
    "build" : "webpack --mode production" // 제품모드
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    // 번들러가 동작하기 위한 핵심 패키지
    "webpack": "5.36.0",
    // cli 명령어 지원 패키지
    "webpack-cli": "4.6.0",
    // dev 명령어로 개발 서버를 실행할 때 
    // 조금 더 개발에 특화되서 페이지를 열어준다
    "webpack-dev-server": "4.0.0-beta.2" 
  }
}

    04. index.html, main.jsを作成!


    <!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>webpack</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/reset.min.css">
</head>

<body>
    <h1>Hello Webpack!!</h1>
</body>

</html>
    console.log("Webpack!");

    05. webpack.config.js

  • パッケージとは異なり、webpackはプロファイル
    • を直接生成する必要がある.
  • webpackは、コンポーネント
    • を提供する必要があります.
  • は詳細なコンポーネントを記述し、プロジェクト
    • をより深く理解することができる.
    SpringBaseUrlの決定
    [アルゴリズム]方向図パスの検索-DFSの使用