Webpack 入門: パート 1

最近 Web サイトを構築する場合、開発タスクを実行し、実際の環境用にファイルを準備するのに役立つ、ある種の構築プロセスを用意するのがかなり標準的な方法です。

Grunt または Gulp を使用してこれを行うことができ、一方の端にコードを配置し、もう一方の端で縮小された CSS と JavaScript を取得できる一連の変換を構築します。

これらのツールは非常に人気があり、非常に便利です。ただし、Webpack を使用する別の方法があります。

Webpackとは何ですか?

Webpack はいわゆる「モジュール バンドラー」です。 JavaScript モジュールを取得し、その依存関係を理解し​​、最も効率的な方法でそれらを接続し、最終的に JS ファイルを生成します。特別なことは何もありませんね？ RequireJS のようなものは、これを何年も行ってきました。

さて、ここからが問題です。 Webpack を使用すると、モジュールは JavaScript ファイルに限定されなくなります。ローダーを使用することにより、Webpack は、JavaScript モジュールが CSS ファイルを必要とする可能性があること、および CSS ファイルが画像を必要とする可能性があることを認識します。出力アセットには必要なものだけが含まれるため、大きな問題は発生しません。実際に動作を確認できるように設定を開始しましょう。

＃＃＃インストール＃＃＃

ほとんどの開発ツールと同様に、続行する前に Node.js をインストールする必要があります。正しく設定されていると仮定すると、Webpack をインストールするために必要なのは、コマンド ラインに次のように入力することだけです。

リーリー

これにより Webpack がインストールされ、システム上のどこからでも実行できるようになります。次に、新しいディレクトリを作成し、その中に次のように基本的な HTML ファイルを作成します。 リーリー

ここで重要な部分は

bundle.js

への参照です。これは Webpack によって作成されるものです。 H2 要素にも注目してください。これは後で使用します。

次に、HTML ファイルと同じディレクトリに 2 つのファイルを作成します。最初のファイルに main.js

という名前を付けると、これがスクリプトのメイン エントリ ポイントであることが想像できます。次に、2 番目の

say-hello.js を追加します。これは、人の名前と DOM 要素を受け取り、その要素にウェルカム メッセージを挿入する単純なモジュールになります。 リーリー 単純なモジュールができたので、それをインポートして main.js

から呼び出すことができます。次のようにするのと同じくらい簡単です:

リーリー ここで HTML ファイルを開いた場合、main.js

がインクルードされておらず、ブラウザの依存関係もコンパイルされていないため、明らかにこのメッセージは表示されません。私たちがしなければならないことは、Webpack に

main.js を調べて依存関係があるかどうかを確認させることです。その場合、それらをまとめてコンパイルし、ブラウザーで使用できる Bundle.js ファイルを作成する必要があります。 ターミナルに戻り、Webpack を実行します。次のように入力してください: リーリー

指定された最初のファイルは、Webpack が依存関係の検索を開始するエントリ ファイルです。必要なファイルが他のファイルを必要とするかどうかを判断し、必要な依存関係がすべて計算されるまでこれを続けます。完了すると、依存関係が単一の連結されたファイルとして

bundle.js

に出力されます。 Enter キーを押すと、次のような内容が表示されるはずです:

リーリー 次に、ブラウザで index.html

を開いてページを表示し、挨拶してください。

＃＃＃構成＃＃＃ Webpack を実行するたびに入力ファイルと出力ファイルを指定するのは、あまり楽しいことではありません。ありがたいことに、Webpack では設定ファイルを使用できるため、手間が省けます。次の内容を含むファイルをプロジェクトのルート ディレクトリに webpack.config.js

という名前で作成します:

リーリー

これで、「

webpack」と入力するだけで同じ結果が得られます。

開発サーバー

＃＃＃それは何ですか？ファイルを変更するたびに、わざわざ webpack と入力することさえありますか?わかりません、今日の世代は何とか何とか何とか。さて、作業をより効率的にするために、小さな開発サーバーをセットアップしましょう。ターミナルに次のように入力します:

リーリー

次に、コマンド

webpack-dev-server

を実行します。これにより、ファイルを提供する場所として現在のディレクトリを使用して、単純な Web サーバーの実行が開始されます。新しいブラウザ ウィンドウを開いて、http://localhost:8080/webpack-dev-server/ にアクセスします。すべてがうまくいけば、次のような内容が表示されます:

さて、私たちは素晴らしい小さな Web サーバーを持っているだけでなく、コードの変更を監視できるサーバーも持っています。ファイルが変更されたことが分かると、自動的に webpack コマンドが実行され、コードがバンドルされ、何もしなくてもページが更新されます。すべて設定不要。

試してみて、

sayHello 関数に渡される名前を変更してからブラウザに戻って、変更がすぐに適用されることを確認してください。

装载机

Webpack 最重要的功能之一是加载器。加载器类似于 Grunt 和 Gulp 中的“任务”。它们本质上是获取文件并以某种方式对其进行转换，然后再将其包含在我们的捆绑代码中。

假设我们想在代码中使用 ES2015 的一些优点。 ES2015 是 JavaScript 的新版本，并非所有浏览器都支持，因此我们需要使用加载器将 ES2015 代码转换为支持的普通旧 ES5 代码。为此，我们使用流行的 Babel Loader，根据说明，我们安装如下：

npm install babel-loader babel-core babel-preset-es2015 --save-dev

这不仅会安装加载器本​​身，还会安装其依赖项和 ES2015 预设，因为 Babel 需要知道它正在转换的 JavaScript 类型。

现在加载器已安装，我们只需要告诉 Babel 使用它即可。更新 webpack.config.js 使其看起来像这样：

module.exports = {
    entry: './main.js',
    output: {
        filename: 'bundle.js'
    },
    module: {
        loaders: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel',
                query: {
                    presets: ['es2015']
                }
            }
        ],
    }
};

这里有一些重要的事情需要注意。第一个是 test: /\.js$/ 行，它是一个正则表达式，告诉我们将此加载程序应用于所有具有 .js 扩展名的文件。同样，exclude: /node_modules/ 告诉 Webpack 忽略 node_modules 目录。 loader 和 query 是相当不言自明的——使用带有 ES2015 预设的 Babel 加载器。

按 ctrl+c 并再次运行 webpack-dev-server 重新启动您的 Web 服务器。我们现在需要做的就是使用一些 ES6 代码来测试转换。我们如何将 sayHello 变量更改为常量？

const sayHello = require('./say-hello')

保存后，Webpack 应该会自动重新编译您的代码并刷新您的浏览器。希望您不会看到任何变化。查看 bundle.js 并查看是否可以找到 const 关键字。如果 Webpack 和 Babel 已经完成了它们的工作，您将不会在任何地方看到它——只是普通的旧 JavaScript。

进入第 2 部分

在本教程的第 2 部分中，我们将介绍如何使用 Webpack 将 CSS 和图像添加到您的页面，以及让您的网站做好部署准备。

以上がWebpack 入門: パート 1の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。