Youtube Clone Coding (8. webpack)

14986 ワード
node.js express JavaScript clone coding webpack youtube テキストリンク

Webpackはnodeです。jsでbabelのような役を演じます。


  • Webpack、Webpack-cli devDependenciesを使用してインストール
  • npm i webpack webpack-cli -D

  • srcでclient/js/mainを使用します.jsファイルを作成します.
  • 以降main.jsに書かれたコードは私たちが処理するコードです.

  • webpack.config.jsファイルの作成
  • webpack.confing.jsコンテンツ

  • webpack.config.jsのコードは以前の構文で書きます.

  • entry:処理するファイルのパス

  • mode:開発段階、開発完了段階、生産

  • 出力:成果物

  • filename:これに基づいて、私たちが納品するファイル名を入力します.

  • path:私たちの成果物ファイルをどこに保存するかを指定します(このパスは絶対パス(完全パス)でなければなりません!)

  • rules:各ファイルタイプに基づいて、どのような変換を行うかを決定します.
    -複数のルールがある可能性があるので、それを並べます.
    -test:変換するファイル(このコースでjsファイルをすべて変換するコードです)
    -use:どのloaderで変換するか(このコースではbabel-loaderを使用します)
    −babel−loaderを使用するためにはnpm i babel−loaderが必要である.
    -クリーンアップ:babel-loaderを使用してjsファイルを変更します.
    const path = require("path");

module.exports = {
  entry: "./src/client/js/main.js",
  mode: "development",
  output: {
    filename: "main.js",
    path: path.resolve(__dirname, "assets", "js"),
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        use: {
          loader: "babel-loader",
          options: {
            presets: [["@babel/preset-env", { targets: "defaults" }]],
          },
        },
      },
    ],
  },
};

  • ブラウザでassetsファイルを読み込む
  • サーバは、すべてのファイルをブラウザに公開しないため、個別に設定する必要があります.
  • app.use("/static", express.static("assets"));
  • ユーザーは、/静態時に資産ファイル、すなわち
    • を表示する.

  • スクリプトをpugに書き込む
  • script(src="/static/js/main.js")

  • webpack.config.jsの実行
  • package.コードをjsonファイルに書き込む

  • 次のコードのため、npm run assetsはwebpackを実行できます.

  • 実行時、assets/js/main.jsファイルの作成→私たちが書いたコードを変換するコードを含む
    "assets": "webpack --config webpack.config.js"

  • scssをcssに変換
  • npm i sass sass-loader css-loader style-loader
  • client/scss/styles.scssの作成→cssを使用して作成するファイル
  • main.jsのスタイル.scss
    • のインポート
  • ルールでscssに関連するロードプログラムを設定する

  • loaderは逆の順序で実行されます.
    {
      test: /\.scss$/,
      use: ["style-loader", "css-loader", "sass-loader"],
},
    • 実行
  • npm run資産

  • MiniCssExtractPluginを使用してjsファイルとcssファイルを分離
  • npm install --save-dev mini-css-extract-plugin
  • の下のcodroin解jsとcssファイルは互いに分離されている.
  • main.jsはassets/js/mainです.jsに格納された
  • sassはassets/css/stylesです.cssに保存されている
    • const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const path = require("path");
module.exports = {
  entry: "./src/client/js/main.js",
  mode: "development",
  plugins: [
    new MiniCssExtractPlugin({
      filename: "css/styles.css",
    }),
  ],
  output: {
    filename: "js/main.js",
    path: path.resolve(__dirname, "assets"),
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        use: {
          loader: "babel-loader",
          options: {
            presets: [["@babel/preset-env", { targets: "defaults" }]],
          },
        },
      },
      {
        test: /\.scss$/,
        use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"],
      },
    ],
  },
};
    cssを
  • pugに接続
  • link(rel="stylesheet", href="/static/css/styles.css")

  • npm run資産を引き続き使用してwebpackを移行
  • webpack.config、jsで次の設定を行います.

  • watch:true→初期構築後、webpackは解析ファイルの変更を監視し続けます.

  • clean:true→構築で作成したファイルのみを表示し、古いファイルは表示されません.
    module.exports = {
  entry: "./src/client/js/main.js",
  mode: "development",
  watch: true,
  plugins: [
    new MiniCssExtractPlugin({
      filename: "css/styles.css",
    }),
  ],
  output: {
    filename: "js/main.js",
    path: path.resolve(__dirname, "assets"),
    clean: true,
  },

  • Webpack関連ファイルの保存時にサーバを再起動しない
  • nodemon.jsonファイルの作成
  • nodemon.コードからjsonファイル

  • ignore→ignoreで設定したファイルを無視することを示します

  • exec→検出時に実行するコマンド
    {
  "ignore": ["webpack.config.js", "src/client/*", "assets/*"],
  "exec": "babel-node src/init.js"
}
  • package.json

  • Nodemon/webpackは、実行時に対応するjsonファイルを検索して実行するため、次のように簡略化できます.
    "scripts": {
    "dev:server": "nodemon",
    "dev:assets": "webpack"
  },
    • Redisのrehash方式
    どのようにバンドルからスタイルシートを除外すると怠惰な角度でそれらをロードするには?