Webpackのチュートリアルでは、基本的なウェブサイトのウェブパック4または5をゼロから設定する方法

🌼 導入
ハローリーダー!🐱
ご存知のようにWebpack イライラすることができますタスク.良いドキュメンテーションを持っているにもかかわらず、このバンドルは、いくつかの理由で乗るのに快適な馬ではありません.
Webpackチームは本当にハードで、比較的迅速にそれを開発しています.しかし、それは新しい開発者が一度にすべてのものを学ぶために圧倒的です.チュートリアルは古くなっており、いくつかのプラグインが壊れています.場合によっては何か些細なことに立ち往生することができますGoogleの多くの最後に役立つgithubの問題のいくつかの短いメッセージを見つけること.
WebPackについての入門記事の欠如とどのように動作する、人々はストレートのようなツールやVueのCLIを作成するようなツールにまっすぐ突進するが、1つは時々いくつかの簡単なプレーンJavaScriptとフレームワークなしの任意の空想的なものを書く必要があります.
このガイドでは、ステップバイステップのWebパックの設定は、ES 6、SASS、および画像/フォントの任意のフレームワークなしで表示されます.それは、最も簡単なウェブサイトのためにWebpackを使用し始めるか、更なる学習のためのプラットホームとしてそれを使用するのに十分でなければなりません.このガイドでは、Web開発とJavaScriptについてのいくつかの事前の知識が必要ですが、それは誰かに役立つかもしれません.少なくとも、私がWebpackから始めたとき、私はこれのような何かに満足しています!

🎈 ゴール
Webpackを使用してJavaScript、スタイル、イメージ、フォントファイルを1つのdistフォルダにまとめます.

Webpackは、1つのバンドルされたJavaScriptファイルと1束のCSSファイルを生成します.このようにHTMLファイルに追加することができます(もちろん、必要に応じてdistフォルダへのパスを変更すべきです).

<link rel="stylesheet" href="dist/bundle.css">
<script src="dist/bundle.js"></script>

そして、あなたは良い🍹
このガイドから完成した例を見ることができます.🔗 link .
注:最近依存性を更新しました.このガイドは最新のWebpack 5に適用されますが、必要に応じてWebPack 4用の設定を行っています.

🔧 始める

1 .インストール
使用するnpm : $ npm init パッケージを作成するコマンド.JavaScriptの依存関係を置くプロジェクトフォルダのJSONファイル.それから、Webpack自体をインストールすることができます$ npm i --save-dev webpack webpack-cli .

エントリポイントファイルの作成
Webpackは、エントリポイントと呼ばれる単一のJavaScriptファイルからそのジョブを開始します.インデックス作成.JavaScriptフォルダのJS.次のような簡単なコードを書くことができますconsole.log('Hi') それを確実にするために.


3 . WebPackを作成します.設定.js
... プロジェクトフォルダで.ここがすべて✨ 魔法が起こる.

// Webpack uses this to work with directories
const path = require('path');

// This is the main configuration object.
// Here, you write different options and tell Webpack what to do
module.exports = {

  // Path to your entry point. From this file Webpack will begin its work
  entry: './src/javascript/index.js',

  // Path and filename of your result bundle.
  // Webpack will bundle all JavaScript into this file
  output: {
    path: path.resolve(__dirname, 'dist'),
    publicPath: '',
    filename: 'bundle.js'
  },

  // Default mode for Webpack is production.
  // Depending on mode Webpack will apply different things
  // on the final bundle. For now, we don't need production's JavaScript 
  // minifying and other things, so let's set mode to development
  mode: 'development'
};

4 .パッケージにNPMスクリプトを追加します.JSONを実行するには
Webpackを実行するには、NPMスクリプトをシンプルなコマンドでwebpack 設定オプションとして設定ファイルを設定します.我々のパッケージ.JSONは今のところこのようになります.

{
  "scripts": {
    "build": "webpack --config webpack.config.js"
  },
  "devDependencies": {
    "webpack": "^4.29.6",
    "webpack-cli": "^3.2.3"
  }
}

5 webpackを実行する
その基本的なセットアップで$ npm run build コマンド.Webpackは我々のエントリファイルを調べますimport モジュール内部の依存関係で、単一にバンドルします.distフォルダのjsファイル.コンソールでは、次のように表示されます.

あなたが加えるならば<script src="dist/bundle.js"></script> を参照してくださいHi ブラウザコンソールで!

🔬 ローダー
すごい!標準のJavaScriptがバンドルされています.しかし、私たちがES 6(およびそれ以降)からすべてのクールな特徴を使用して、ブラウザ互換性を保存したいならば、どうですか?Webpackに私たちのES 6コードをブラウザ互換コードに変換する方法を教えてください.
それはWebpackのローダが遊びに来るところです.LoaderはWebpackの主な特徴の一つです.これらは私たちのコードに特定の変換を適用します.
Webpackに加えましょう.設定.JSファイル新しいオプションモジュール.規則このオプションでは、Webpackはどのように正確に異なる種類のファイルを変換すべきかを言うでしょう.

entry: /* ... */,
output: /* ... */,

module: {
  rules: [
  ]
}

JavaScriptファイルの場合は、次のようになります.

1 .babel-loader
Babel 現在、最もJavaScriptの配信者はそこです.我々は、それを束ねる前に、ブラウザー互換のJavaScriptコードに我々の現代のJavaScriptコードを変えるために、Webpackにそれを使うと言います.
バベルローダは正確にそれを行います.インストールしましょう$ npm i --save-dev babel-loader @babel/core @babel/preset-envさて、JavaScriptファイルの規則を追加します.

rules: [
    {
      test: /\.js$/,
      exclude: /(node_modules)/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-env']
        }
      }
    }
]

test はregular expression 変換するファイルの拡張子.この場合、JavaScriptファイルです.

exclude モジュールを変換するときにパスが無視されるべきWebpackに指示する正規表現です.つまり、将来インポートされたベンダーライブラリをNPMからインポートすることはできません.

use 主なルールのオプションです.ここでは、対応するファイルに適用されるローダを設定しますtest regexp (この場合のJavaScriptファイル)

options ローダによって異なります.この場合、私たちはBabelのためにデフォルトのプリセットを設定します.それは独自の別のトピックであり、あなたが興味を持っている場合は、それに飛び込むことができますが、それは今のようにそれを維持するのは安全です.

今、あなたは安全にJavaScriptモジュール内のES 6コードを配置することができます!

2 .sass-loader
時間のスタイルで動作するように.通常、我々はプレーンなcssを書きたくない.非常によく、私たちはSASS プリプロセッサ我々は、SSSをCSSに変換し、自動プレフィックスを適用し、minisedを適用します.CSSに対する「デフォルト」アプローチの一種です.それを正確にするためにwebpackに話しましょう.
我々が我々の主なsassファイルsass/スタイルを輸入すると言いましょう.JavaScript/indexのscss.エントリーポイント.

import '../sass/styles.scss';

しかし、今のところ、Webpackはどのように処理するか全くわからない.SSSファイルまたは任意のファイルを除く.js適切なローダを追加する必要があります.$ npm i --save-dev sass sass-loader postcss-loader css-loadersassファイルに新しいルールを追加し、Webpackに対してどうすればよいかを教えます.

rules: [
    {
      test: /\.js$/,
      /* ... */
    },
    {
      // Apply rule for .sass, .scss or .css files
      test: /\.(sa|sc|c)ss$/,

      // Set loaders to transform files.
      // Loaders are applying from right to left(!)
      // The first loader will be applied after others
      use: [
             {
               // This loader resolves url() and @imports inside CSS
               loader: "css-loader",
             },
             {
               // Then we apply postCSS fixes like autoprefixer and minifying
               loader: "postcss-loader"
             },
             {
               // First we transform SASS to standard CSS
               loader: "sass-loader"
               options: {
                 implementation: require("sass")
               }
             }
           ]
    }
]

ここでWebpackに関する重要なことに注意してください.チェーンの複数のローダをすることができます彼らは、最初から最後まで1つずつに適用されますuse 配列.
今Webpackが出会うimport 'file.scss'; コードでは、何をすべきか知っている!

郵便番号
PostCSSのローダにどのように変換するかを説明しなければなりません.別の設定ファイルを作成しますpostcss.config.js そして、我々が我々のスタイルのために必要とするPostcssプラグインを使ってください.あなたは、CSSがあなたの本当のウェブサイトの準備ができていることを確認するために最も基本的で役に立つプラグインをminisedして、autoprefixするのを発見するかもしれません.
まず、これらのPostcssプラグインをインストールします.$ npm i --save-dev autoprefixer cssnano .
次に、それらをPostcssに追加します.設定.以下のようなJSファイル

module.exports = {
    plugins: [
        require('autoprefixer'),
        require('cssnano'),
        // More postCSS modules here if needed
    ]
}

飛び込むことができるPostCSS より深く、あなたのワークフローまたはプロジェクト要件に合うより多くのプラグインを見つけてください.
すべてのCSSのセットアップの後に1つだけ残った.Webpackは解決します.SCSSのインポート、変換、および.次は何ですか.それは魔法のようにシングルを作成しません.あなたのスタイルが束ねられたCSSファイル;Webpackにそれを伝えなければなりません.しかし、このタスクは、ローダーの能力外です.Webpackのプラグインを使う必要があります.

🔌 プラグイン
それらの目的は、ローダがそうすることができない何かをすることになっています.そして、私たちの場合には特別なものがあります.$ npm i --save-dev mini-css-extract-pluginWebPackの起動時にプラグインを別々にインポートできます.設定.jsファイル

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

アフターmodule.rules ローダを設定する配列plugins オプションを使用してプラグインをアクティブにするコード:

module: {
  rules: [
    /* ... */
  ]
},
plugins: [

  new MiniCssExtractPlugin({
    filename: "bundle.css"
  })

]

今、このプラグインをCSSのローダーにつなげます.

{
      test: /\.(sa|sc|c)ss$/,
      use: [
             {
               // After all CSS loaders, we use a plugin to do its work.
               // It gets all transformed CSS and extracts it into separate
               // single bundled file
               loader: MiniCssExtractPlugin.loader
             }, 
             {
               loader: "css-loader",
             },
             /* ... Other loaders ... */
           ]
}

完了!あとに続いたら走ることができた$ npm run build コマンドと検索バンドル.あなたのdistフォルダのCSSファイル.一般的な設定は次のようになります.

Webpackは異なる目的のためのプラグインのトンを持っています.あなたの必要性でそれらを探索することができますofficial documentation .

🔬 より多くのローダ:イメージとフォント
この時点で、Webpackの仕組みの基礎に追いつくべきです.しかし、我々はまだしていません.ほとんどのウェブサイトにはいくつかの資産が必要です.Webpackは解決できますbackground-image: url(...) CSSのローダに感謝しますが、URLを設定したらどうすればいいのかわかりません.PNGまたはJPGファイル.
CSS内のファイルを処理するための新しいローダを必要としたり、JavaScriptで正しくインポートすることができます.ここにあります.

file-loader
インストールする$ npm i --save-dev file-loader そして、我々のウェブパックに新しい規則を加えてください.設定.js

rules: [
    {
      test: /\.js$/,
      /* ... */
    },
    {
      test: /\.(sa|sc|c)ss$/,
      /* ... */
    },
    {
      // Now we apply rule for images
      test: /\.(png|jpe?g|gif|svg)$/,
      use: [
             {
               // Using file-loader for these files
               loader: "file-loader",

               // In options we can set different things like format
               // and directory to save
               options: {
                 outputPath: 'images'
               }
             }
           ]
    }
]

あなたのCSSの中でこのようなイメージを使うなら、

body {
  background-image: url('../images/cat.jpg');
}

Webpackは正常に解決します.あなたは、画像のフォルダ内のハッシュ名を使用してイメージを見つける.内部の束.CSSは次のようになります.

body {
  background-image: url(images/e1d5874c81ec7d690e1de0cadb0d3b8b.jpg);
}

ご覧のように、WebPackは非常にインテリジェントです-それは正しくdistフォルダに相対的にURLのパスを解決する!
同様にフォントのルールを追加し、同様のイメージにそれらを解決することができます一貫性のためにフォントフォルダに出力パスを変更します

rules: [
    {
      test: /\.js$/,
      /* ... */
    },
    {
      test: /\.(sa|sc|c)ss$/,
      /* ... */
    },
    {
      test: /\.(png|jpe?g|gif|svg)$/,
      /* ... */
    },
    {
      // Apply rule for fonts files
      test: /\.(woff|woff2|ttf|otf|eot)$/,
      use: [
             {
               // Using file-loader too
               loader: "file-loader",
               options: {
                 outputPath: 'fonts'
               }
             }
           ]
    }
]

🏆 ラッピング
それだ!古典的なウェブサイトのための単純なウェブパック構成.我々は、エントリポイント、ローダ、およびプラグインの概念をカバーし、どのようにウェブパックを変換し、ファイルをバンドルします.
もちろん、これはWebpackについての一般的な考え方を理解することを目的とした全く簡単な設定です.ソースマッピング、ホットリロード、JavaScriptフレームワークの設定、およびWebPackが行うことができます他のすべてのものを必要とする場合に追加する多くのことがありますが、私はこれらのものは、このガイドの範囲外です感じている.
あなたが奮闘するか、より学びたいならば、私はあなたにWebpackofficial documentation . ハッピーバンドル!