[webpack] webpack.configについて

動機。

ウトコでは레벨1-로또 미션Webpack初使用.その際、優特科側はデフォルトのプロファイルを提供していたため、個別に設定する必要があるファイルはあまりありませんでした.
でも레벨1-유튜브 미션Webpackをインストールして使うべき!
これは言い訳ですが、このときタスクに左右されるように宝くじタスクのファイルを持ってきて、理解できないまま属性を追加しました.레벨1-자판기一級の最後の任務である.タスク1でWeb Packを勉強しました.これはWeb Packが終わった+フェアの親切な説明だと思います.
始まる前に、私のウトコ自動販売機の任務パートナーの炳民に感謝します.ほとんど他の講師のように注意してくれました!

おかげでTypescript、Webpack、Babelなど全体的に早く伝授を受けました
これはウトコの大きなメリットだと思います.

Webpack

Webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any resource or asset.

module bundler 👉 モジュールのバンドル👉 モジュール(再利用可能なコードセグメント)バンドル

つまり、ブラウザでJavaScriptファイルを使用する場合は、それらをまとめるだけでWebpack!

ページパックは赤い線.よく使われていますよね?

Webpackのメリット

複数のファイルを1つのファイルにバインドすることで、HTTPリクエストを削減できます.

元々jsだけがimport文に簡単に導入されていたので、cssやimageなどの各種ファイルもimport문으로 가져올 수 있어요.

Webpackのインストール

npm i -D webpack webpack-cli

設置に関する良い記事が多いので省略しました.

正式な書類実は素晴らしい.

Webpackの本体webpackconfig.jsを開けてみよう

参考正式な書類一つ一つ検索して便利です.

それでもwebconfig.jsのファイル構成をすばやく確認する必要がありますよね?コードを読んで理解してみましょうか?

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  mode: 'development', // 개발 모드
  entry: './src/index.ts', // 시작 지점
  resolve: { // 어떤 모듈에 대해서
    extensions: ['.js', '.css', '.ts'], 
  },
  devServer: { // 개발 서버
    port: 9000,
  },
  devtool: 'source-map', // 소스맵 생성 여부, 방법 설정
  output: { // build한 결과를 어떻게 저장할지
    filename: 'bundle.js', 
    path: path.resolve(__dirname, 'dist'),
  },
  module: { // 자 이제 모듈 드가자~
    rules: [
      {
        test: /\.js$/, //.js로 끝나는 친구들한테
        exclude: /node_modules/, // 잠깐 이건 빼고!
        use: [ // 이런 걸 적용할게요!
          {
            loader: 'babel-loader', // loader: 파일 전처리를 뭘로 할지!
            options: {
              presets: ['@babel/preset-env'],
            },
          },
        ],
      },
      {
        test: /\.ts$/,
        exclude: /node_module/,
        use: {
          loader: 'ts-loader', // typscript loader도 이렇게 설정을 해줬습니다.
        },
      },
      {
        test: /\.scss$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'], // 아 참~! 순서도 중요해요. 뒤에서부터 적용됩니다.
      },
      {
        test: /.(png|jpe?g|gif|json)$/i,
        loader: 'file-loader',
        options: {
          name: 'assets/[contenthash].[ext]', // 이런 이름으로 dist/assets/....로 저장될 겁니다.
        },
      },
    ],
  },
  plugins: [
    new CleanWebpackPlugin(), // build할 때마다 dist를 초기화해줘요~
    new HtmlWebpackPlugin({ // 번들 HTML 파일을 쉽게 생성해줘요~
      template: './index.html',
    }),
    new MiniCssExtractPlugin({ // CSS파일을 필요로하는 JS파일만 CSS파일을 생성해줘요~
      filename: 'bundle.css',
    }),
  ],
};