Webpack開発環境の設定

26758 ワード
webpack テキストリンク
Webpack+Vanilla JavaScript、HTML、CSS開発環境を設定します.

Webpackとは?


Webパッケージは、複数のJavaScriptファイル(モジュール)を1つのJavaScriptファイル(バインディング)に組み合わせたモジュールバインディングです.
現在、多くのWebページがSPA形式で実装され、各ページでhtmlを作成してパブリッシュするのではなく、複数のjavascriptを1つのhtmlに接続しています.
Webパッケージを使用すると、複数の依存関係が絡み合ったJavaScriptファイルを1つのファイルにまとめることができるので、導入時にも便利です.

Webpack開発環境の設定


1.初期設定


1-1. プロジェクトフォルダを作成します。

project
├── index.html
└── src
    └── index.js

1-2. npmを初期化します。

npm init -y

1-3. Webpackをインストールします。

npm install webpack-cli --save-dev💡 最新のnpmは--saveを基本設定とし、単独で記入する必要はありません.

1-4. Webpackを設定するためのファイルを生成します。

touch webpack.config.js

1-5. Webpack初期設定を行います。


(webpack.config.js)
// path 모듈 불러오기
const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    // 최종 번들링된 자바스크립트
    filename: 'main.js',
    // dist를 배포용 폴더로 사용
    path: path.resolve(__dirname, 'dist')
  }
}
  • entry:導入前タスクのJavaScript起点
  • 出力:最終配置用のバンドルファイルを設定する

    • 1-6. package.jsonはbuildコマンドを設定します。

    "scripts": {
  "build": "webpack"
},

    1-7. buildが正常に動作しているかどうかをテストします。

    npm run builddistフォルダを作成するかどうかを確認できます.内部はmainです.jsファイルが生成されました.
    すべてのJavaScriptファイルを統合jsにパッケージされます.

    2.htmlビルダーのインストール


    2-1. htmlを構築するためにプラグインをインストールします。

    npm install html-webpack-plugin

    2-2. webpack.config.jsにプラグインをロードし、設定します。

    const path = require('path');
// html 플러그인을 불러오고
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist')
  },
  // 여기에 설정
  plugins: [new HtmlWebpackPlugin({
    template: "./index.html" // index.html을 기본 템플릿으로 반영할 수 있도록 설정
  })]
}

    2-3. 再構築時にdistフォルダにインデックスを作成します。htmlが生成されたことも確認できます。

    npm run build 
    base-project
├── dist
│   ├── index.html
│   └── main.js
├── index.html
├── package-lock.json
├── package.json
├── src
│   └── index.js
└── webpack.config.js

    3.リアルタイム更新を画面に反映


    Webpack-dev-serverをインストールすると、リアルタイムで更新されたコンテンツを画面で表示できます.

    3-1. Webpack-dev-serverをインストールします。

    npm install webpack-dev-server -D💡 -D = --save-dav

    3-2. webpack.config.js, package.jsonに設定します。


    (webpack.config.js)
    const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist') 
  },
  plugins: [new HtmlWebpackPlugin({
    template: "./index.html"
  })],
  devServer: {
    // 개발 서버가 dist 폴더를 제공할 수 있도록 설정
    static: {
      directory: path.resolve(__dirname, 'dist')
    },
    port: 8080
  }
}
    (package.json)
    "scripts": {
  "start": "webpack serve --open --mode=development",
  "build": "webpack --mode=production"
},
  • ・npm start:開発モードで使用するコマンド語なので設定--mode=developmentロモード.
  • ・npm run build:生産モードで使用するコマンド語なので設定--mode=productionロモード.

    • 3-3. やってみる。

    npm start

    4.内部スタイルシート


    headでスタイルを直接作成する方法でスタイルを適用します.

    4-1. css-loader、style-loaderのインストール

    npm install -D css-loader style-loader
  • css-loader:cssファイルを読み込む役割
  • style-loader:cssを作成<style>ラベルを挿入<head>内部.

    • 4-2. の手配を

    ...

module.exports = {
  entry: './src/index.js',
  output: {
    ...
  },
  plugins: [new HtmlWebpackPlugin({
    ...
  })],
  module: {
    rules: [
      {
        test: /\.css$/,
		// use 배열은 뒤에서부터 적용된다.
        use: ["style-loader", "css-loader"] 
      }
    ]
  },
  devServer: {
    ...
  }
}

    4-3. srcフォルダにcssとインデックスを作成します。jsをインポートします。

    project
├── dist
│   ├── index.html
│   └── main.js
├── index.html
├── package-lock.json
├── package.json
├── src
│   ├── index.js
│   ├── style.css
│   └── util.js
└── webpack.config.js
    (src/index.js)
    // css를 가져온다
import './style.css'

document.getElementById("root").innerHTML = '안녕하세요✌️';
    (src/style.css)
    body {
	font-size: 30px;
	color: blue;
}
    (index.html)
    <!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>Document</title>
</head>
<body>
	<div id="root"></div>
	<!-- 스크립트를 삽입하지 않아도 웹팩에서 자동으로 스크립트를 삽입해준다. -->
	<!-- 아래 코드는 필요없다-->
	<!-- <script src="./dist/main.js"></script>  -->
</body>
</html>

    4-4. もう一度やってみる。

    npm start <head>領域中<script>和<style>自動進出.

    5.外部スタイルシート


    外部cssファイルを読み込むようにスタイルを適用してみます.

    5-1. mini-css-extract-pluginインストール

    npm install -D mini-css-extract-plugin

    5-2. の手配を


    (webpack.config.js)
    const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
// 플러그인을 불러온다
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    ...
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./index.html"
    }),
    // 플러그인 추가
    new MiniCssExtractPlugin({
      filename: "common.css",
    })
  ],
  module: {
    rules: [
      {
        test: /\.css$/,
        // 다시 설정한다.
        use: [MiniCssExtractPlugin.loader, "css-loader"]
      }
    ]
  },
  devServer: {
   ...
  }
}

    5-3. もう一度実行すると、外部ファイルに挿入されていることがわかります。



    💡 内部ビルド方式ではCSSファイルは単独で生成されません.ヘッダーに直接書いてあるからです.
    逆に、外部メソッドは、構築時に個別のCSSファイルを生成します.

    6.イメージローダ


    今回はロードプログラムをインストールして画像を生成します.

    6-1. File-loaderのインストール

    npm install -D file-loader💡 Loader?
    WebパッケージはJavaScriptファイルをモジュールと見なすだけでなく、すべてのWebリソースもモジュールと見なす.
    JavaScriptファイルに画像またはCSSファイルをインポートし、利用できるようにするのがLoaderです.
    Loaderは、JavaScriptファイルではなく、構築時にインポートしたリソースを解釈および変換できます.

    6-2. の手配を


    (webpack.config.js)
    ...

module.exports = {
  entry: './src/index.js',
  output: {
    ...
  },
  plugins: [
    ...
  ],
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, "css-loader"]
      },
      // file-loader 세팅
      {
        test: /\.(png|jpe?g|gif|svg|webp)$/i,
        use: ['file-loader'],
      }
    ]
  },
  devServer: {
   ...
  }
}

    7.未使用の構築ファイルを自動的に消去する


    buildに含まれるファイルが必要ない場合は、ファイルを削除して再構築して、まだ存在することを確認します.
    未使用のbuildファイルを自動的に削除できるプラグインをインストールします.

    7-1. 設定

    npm install -D clean-webpack-plugin

    7-2. の手配を


    (webpack.config.js)
    ...

module.exports = {
  entry: './src/index.js',
  output: {
    ...
  },
  plugins: [
    ...
  ],
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, "css-loader"]
      },
      // file-loader 세팅
      {
        test: /\.(png|jpe?g|gif|svg|webp)$/i,
        use: ['file-loader'],
      }
    ]
  },
  devServer: {
   ...
  }
}
    リファレンス
    https://youtu.be/zal9HVgrMaQ
    小数を分数に変換する
    client