webpack

22166 ワード
bundle webpack Module テキストリンク
Webpackについて知ります.

webpack ?


Webpackはモジュールbundlerです.では、モジュールは何ですか.バンドルバッグは何ですか.

module


moduleの事前定義は次のとおりです.
コンピュータシステムでは、部品交換時の各部を容易にするように設計されている.
たとえば、次のコードを表示します.
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <style>
      body {
        background-color: beige;
      }
    </style>
    <title>test</title>
  </head>
  <body>
    <h1 class="hello">Got it!</h1>
    <script>
      alert("hi");
    </script>
  </body>
</html>
このコードはhtml、css、javascriptによって1つのページに実装されます.今は短くても大丈夫ですが、コードが長くなると読みにくくなるのが欠点です.だから次のようにしましょう.
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="style.css" />
    <title>test</title>
  </head>
  <body>
    <h1>Got it!</h1>
    <script src="app.js"></script>
  </body>
</html>
link tagでcssファイルを接続し、script tagでjsファイルを接続しました.このコードを含むファイルはhtmlのみを管理するファイルであり、cssとjsをそれぞれ管理するファイルが作成されます.このとき作成される3つのファイルは、それぞれモジュールと呼ばれます.

bundle


bundleの事前定義は次のとおりです.
小包
すなわち、モジュールbundler(webpack)は、各モジュールを1つのパッケージに組み合わせる.

なぜwebpackが必要なの?


分かりやすいようにモジュールを作成して区別しましたが、なぜ再統合しなければならないのでしょうか.

1.クイックロード


各モジュール化ファイルのコンパイルには時間がかかります.ファイルを作成してコンパイルすると、より速くなります.

2.jsファイル管理


次のコードを見てください.
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="style.css" />
    <title>test</title>
  </head>
  <body>
    <h1>Got it!</h1>
    <script src="app.js"></script>
    <script src="test.js"></script>
  </body>
</html>
appとtestというjsファイルを接続しています.
✔ app.js
const sum = 1;

function app() {
  console.log(sum);
}

app();
✔ test.js
const sum = 2;

function test() {
  console.log(sum);
}

test();
▶結果値

test.jsではsumが問題であることがわかります.すなわち,変数競合が発生した.しかし,開発者も変数名を一つ一つ考慮することはできない.では、webpackで印刷しましょう.
▶webpackを使った結果値

所望の結果値が得られた.そしてwebpackから変換されたtest.js, app.jsファイルを表示すると、次のような変更が表示されます.
// app.js
console.log(1);
// test.js
console.log(2);

使用方法

// webpack.config.js

const path = require("path");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  entry: {
    main: "./src/client/js/main.js",
  },
  mode: "development",
  watch: true,
  output: {
    filename: "js/[name].js",
    path: path.resolve(__dirname, "assets"),
    clean: true,
  },
  plugins: [new MiniCssExtractPlugin({ filename: "css/style.css" })],
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ["@babel/preset-env"],
          },
        },
      },
      {
        test: /\.scss$/,
        use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"],
      },
    ],
  },
};
entry, output, loader, pluginsは基本概念です.一つずつ見ます.

1. entry


ここは、バンドルしたいファイルのパスを宣言する場所です.
モジュールが多ければ多いほど,必然的に依存関係を形成する.関係の起点となるファイルパスをentryで宣言すればよい.上のコードはmainです.jsはその起点ファイルです.Webpackはmainjsに関連するすべてのファイルを1つのファイルにパッケージします.

2. output


バンドルして作成するファイルに関する情報を書く場所です.
以前のwebpackバインドのファイルを再保存する必要があります.ファイルを保存し、ファイル名の場所を指定します.上記のコードは、ファイル名がassets/jsである main.jsパスにファイルを格納します.

3. loader


これは書類の処理方法を教えてくれる場所です.
Webpackは基本的にJavaScriptしか処理しません.したがって、他のファイル(ex.css、babel、scss.)処理のためにloaderを使用して通知する必要があります.
test:loaderを適用するファイルの種類を正規表現にします.
exclude:loaderを適用する場合、除外するファイルを書き込みます.
use:適用するloaderに関する情報を書きます.property loaderのみを使用する場合は配列(objectを使用可能)が適用され、他のpropertyも使用する場合はobjectが適用されます.

babel-loader


babelとwebpackを使用してjsファイルのloaderを変換します.

style-loader , css-loader , sass-loader


これらはscssでファイルをcssに変換するローダです.loaderが適用する順序は「逆順序」(後->前)です.

4. plugin


バンドルの結果をどう処理するかを教えてくれる場所です.
loaderがファイルを処理すると、pluginはバンドルされた結果を処理します.

mini-css-extract-plugin


前にscssをcssに変換するために必要な3つのloaderについて説明した.このようにして生成された出力結果は以下の通りである.

もちろん、ブラウザで開くと、よく使われていることがわかります.しかし、バインドされたcssコードはjsファイルで少しおかしいです.cssファイルとして作成したいのですが、出力するfilenameは一度しか設定できません.必要なのはmini-css-extract-pluginです次はこのpluginを適用した結果です.

これで、webpackについて知りました.

Reference


  • webpack

  • webpack

  • module

  • webpack

  • なぜwebpackを使うのか
    • 778 .上水で泳ぐ
    [伯俊解答]1026号宝物(with.JAVA)