Webpack についての理解を深める: パート 2

前のチュートリアルでは、Webpack プロジェクトをセットアップする方法と、ローダーを使用して JavaScript を処理する方法を学びました。ただし、Webpack が本当に優れているのは、他のタイプの静的リソース (CSS や画像など) をバンドルし、必要な場合にのみプロジェクトに含めることができる機能です。まずはページにスタイルを追加しましょう。

スタイルローダー

まず、styles ディレクトリに通常の CSS ファイルを作成します。 main.css を呼び出して、タイトル要素のスタイル ルールを追加します。

リーリー

それでは、このスタイルシートをページにどのように配置するのでしょうか? Webpack のほとんどの場合と同様に、別のローダーが必要です。実際には、css-loader と style-loader の 2 つがあります。 1 つ目は CSS ファイルからすべてのスタイルを読み取り、もう 1 つはそのスタイルを HTML ページに挿入します。次のようにインストールします:

リーリー

次に、Webpack にそれらの使用方法を伝えます。 webpack.config.js では、別のオブジェクトをローダー配列に追加する必要があります。その中に、CSS ファイルのみと一致するテストを追加し、使用するローダーを指定します。

リーリー

このコード スニペットの興味深い部分は、'style!css' 行です。ローダーは右から左に読み取るため、最初に .css で終わるファイルのスタイルを読み取ってから、それらのスタイルをページに挿入するように Webpack に指示します。

構成ファイルを更新したため、変更を有効にするために開発サーバーを再起動する必要があります。 ctrl c を使用してサーバーを停止し、webpack-dev-server を使用してサーバーを再起動します。

ここで行う必要があるのは、main.js ファイルからスタイルシートを取得することだけです。これは他の JavaScript モジュールと同じ方法で行います。 リーリー

index.html にはまだ触れていないことに注意してください。ブラウザを開くと、スタイル h2 のページが表示されます。スタイルシートのヘッダーの色を変更すると、更新されずにすぐに更新されます。かわいい。

怒鳴らなければなりません

「でも、最近は誰も CSS を使っていません、おじいちゃん! すべては Sass です。」もちろん。幸いなことに、Webpack にはまさにそれを行うローダーがあります。次のコマンドを使用して、Sass のノード バージョンとともにインストールします:

リーリー

次に、

webpack.config.js を更新します: リーリー

これが意味するのは、

.scss で終わるファイルについては、Sass を純粋な CSS に変換し、CSS からスタイルを読み取り、そのスタイルをページに挿入するということです。 main.css の名前を main.scss に変更し、新しい名前のファイルを必要とすることを忘れないでください。まずは Sass: リーリー

次に main.js:

リーリー ＃＃＃素晴らしい。それはとても簡単です。ファイルを変換して保存したり、フォルダーを確認したりする必要はありません。 Sass スタイルを直接入力するだけです。

＃＃＃写真＃＃＃

「では、画像やローダーについても同じことが言えるのではないでしょうか?」 もちろんです。画像の場合は、url-loader を使用します。このローダーは画像の相対 URL を取得し、画像がパッケージに正しく含まれるようにパスを更新します。いつものように：＃＃＃ リーリー

次に、

webpack.config.js

で何か別のことを試してみましょう。通常の方法でローダー配列に別のエントリを追加しますが、今回は正規表現を異なるファイル拡張子の画像と一致させる必要があります:

リーリー

ここでもう 1 つの違いに注意してください。

exclude キーは使用しません。代わりに、include

を使用します。これは、「images」という名前のフォルダーに一致しないものをすべて無視するように webpack に指示するため、より効率的です。

通常、HTML ビューを作成するには、ある種のテンプレート システムを使用しますが、ここでは基本を維持し、昔ながらの方法で JavaScript で画像マークアップを作成します。まず画像要素を作成し、必要な画像を src 属性に設定してから、その要素をページに追加します。 リーリー ブラウザに戻ると、画像が目の前に表示されます。

プリローダー

開発中によく実行されるもう 1 つのタスクは lint です。 lint は、コード内の潜在的なエラーを見つけて、特定のコーディング規約に従っていることを確認する方法です。探したいのは、「変数を最初に宣言せずに使用したか?」または「行末のセミコロンを忘れたか?」です。これらのルールを強制することで、愚かな間違いを早い段階で取り除くことができます。

JSHint 是一种流行的 linting 工具。这会检查我们的代码并突出显示我们所犯的潜在错误。 JSHint 可以在命令行手动运行，但这很快就会成为开发过程中的一件苦差事。理想情况下，我们希望它在每次保存文件时自动运行。我们的 Webpack 服务器已经在留意变化，所以是的，你猜对了——另一个加载器。

按照通常的方式安装jshint-loader：

 npm install jshint-loader

我们必须再次将其添加到我们的 webpack.config.js 中来告诉 Webpack 使用它。然而，这个加载器略有不同。它实际上并没有转换任何代码——只是看看。我们也不希望所有较重的代码修改加载器仅仅因为忘记了分号而运行并失败。这就是预加载器的用武之地。预加载器是我们指定在主要任务之前运行的任何加载器。它们以与加载器类似的方式添加到我们的 webpack.conf.js 中。

module: {
    preLoaders: [
        {
            test: /\.js$/,
            exclude: /node_modules/,
            loader: 'jshint'
        }
    ],
    loaders: [
       ...    
    ]
}

现在，如果检测到问题，我们的 linting 过程会立即运行并失败。在重新启动 Web 服务器之前，我们需要告诉 JSHint 我们正在使用 ES6，否则当它看到我们正在使用的 const 关键字时将会失败。

在配置中的模块键之后，添加另一个名为“jshint”的条目和一行来指定 JavaScript 的版本。

module: {
    preLoaders: [
        ...
    ],
    loaders: [
        ...    
    ]
},
jshint: {
    esversion: 6
}

保存文件并重新启动webpack-dev-server。运行还好吗？伟大的。这意味着您的代码不包含错误。让我们通过删除这一行中的分号来介绍一个：

var imgElement = document.createElement('img')

再次保存文件并查看终端。现在我们得到了这个：

WARNING in ./main.js
jshint results in errors
  Missing semicolon. @ line 7 char 47

谢谢，JSHint！

准备生产

现在我们很高兴我们的代码已经成型并且它完成了我们想要的一切，我们需要为现实世界做好准备。上线代码时最常见的事情之一就是缩小代码，将所有文件连接成一个，然后将其压缩到尽可能小的文件中。在继续之前，请查看您当前的 bundle.js。它可读，有大量空白，大小为 32kb。

“等等！别告诉我。另一个装载机，对吧？”没有！在这种罕见的情况下，我们不需要装载机。 Webpack 内置了缩小功能。一旦您对代码感到满意，只需运行以下命令：

webpack -p

-p 标志告诉 Webpack 让我们的代码为生产做好准备。当它生成捆绑包时，它会尽可能地进行优化。运行此命令后，打开 bundle.js，您会看到它全部被压缩在一起，即使使用如此少量的代码，我们也节省了 10kb。

摘要

我希望这个由两部分组成的教程能让您有足够的信心在自己的项目中使用 Webpack。请记住，如果您想在构建过程中执行某些操作，那么 Webpack 很可能有一个加载器。所有加载器都是通过 npm 安装的，因此请查看那里是否有人已经制作了您需要的内容。

玩得开心！

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