ホームページ > 記事 > ウェブフロントエンド > Webpack 入門チュートリアル

Webpack 入門チュートリアル

PHPz転載: 2019-09-23 11:35:363050ブラウズ

Webpack は、フロントエンドのリソース読み込み/パッケージ化ツールです。モジュールの依存関係に基づいて静的分析を実行し、指定されたルールに従ってこれらのモジュールに対応する静的リソースを生成します。

この章は Webpack3.0 に基づいており、テストに合格しています。

Webpack 入門チュートリアル

この図から、Webpack がさまざまな静的リソース js、css などを静的ファイルに変換し、ページリクエストを削減できることがわかります。

次にWebpackのインストールと使い方を簡単に紹介します。

Webpack のインストール

Webpack をインストールする前に、ローカル環境が node.js をサポートしている必要があります。

npm のインストール速度が遅いため、このチュートリアルでは Taobao のイメージとそのコマンド cnpm を使用します。インストールと使用手順については、Taobao NPM イメージの使用を参照してください。

cnpm を使用して webpack をインストールします:

cnpm install webpack -g

プロジェクトを作成します

次に、ディレクトリアプリを作成します:

mkdir app

runoob1.js ファイルをアプリディレクトリに追加します。コードは次のとおりです。

document.write("It works.");

index.html ファイルをアプリディレクトリに追加します。コードは次のとおりです。

<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <script type="text/javascript" src="bundle.js" charset="utf-8"></script>
    </body>
</html>

次に、webpack コマンドを使用してパッケージ化します:

webpack runoob1.js bundle.js

上記のコマンドを実行すると、runoob1.js ファイルがコンパイルされ、bundle.js ファイルが生成されます。成功後の出力情報は次のとおりです:

Hash: a41c6217554e666594cb
Version: webpack 1.12.13
Time: 50ms
    Asset     Size  Chunks             Chunk Names
bundle.js  1.42 kB       0  [emitted]  main
   [0] ./runoob1.js 29 bytes {0} [built]

index.html をブラウザで開いて出力します。結果は次のようになります。

Webpack 入門チュートリアル

2 つ目の JS ファイルを作成します

次に、別の js ファイル runoob2.js を作成します。コードは次のとおりです。

module.exports = "It works from runoob2.js.";

runoob1.js ファイルを更新します。コードは次のとおりです。

document.write(require("./runoob2.js"));

Next webpack コマンドを使用してパッケージ化します。

webpack runoob1.js bundle.js
 
Hash: dcf55acff639ebfe1677
Version: webpack 1.12.13
Time: 52ms
    Asset     Size  Chunks             Chunk Names
bundle.js  1.55 kB       0  [emitted]  main
   [0] ./runoob1.js 41 bytes {0} [built]
   [1] ./runoob2.js 46 bytes {0} [built]

閲覧中出力結果は次のとおりです。

Webpack 入門チュートリアル

webpack は、モジュールの依存関係に基づいて静的分析を実行します。、これらのファイル (モジュール) は、bundle.js ファイルに含まれます。 Webpack は各モジュールに一意の ID を割り当て、この ID を通じてモジュールにインデックスを付け、アクセスします。ページが開始されると、runoob1.js 内のコードが最初に実行され、require が実行されると他のモジュールが実行されます。

LOADER

Webpack 自体は JavaScript モジュールのみを処理できます。他の種類のファイルを処理したい場合は、次を使用する必要があります。変換用ローダーです。

したがって、CSS ファイルをアプリケーションに追加する必要がある場合は、css-loader と style-loader を使用する必要があります。これらは 2 つの異なることを行います。css-loader は CSS ファイルを走査して、 url() 式が処理され、スタイルローダーが元の CSS コードをページ上のスタイルタグに挿入します。

次に、次のコマンドを使用して css-loader と style-loader をインストールします (グローバルインストールにはパラメーター -g が必要です)。

cnpm install css-loader style-loader

上記コマンドを実行すると、css-loaderとstyle-loaderのインストールディレクトリであるカレントディレクトリにnode_modulesディレクトリが生成されます。

次に、style.css ファイルを作成します。コードは次のとおりです。

body {
    background: yellow;
}

runoob1.js ファイルを変更します。コードは次のとおりです。

require("!style-loader!css-loader!./style.css");
document.write(require("./runoob2.js"));

次に使用します。パッケージ化する webpack コマンド:

webpack runoob1.js bundle.js
 
Hash: a9ef45165f81c89a4363
Version: webpack 1.12.13
Time: 619ms
    Asset     Size  Chunks             Chunk Names
bundle.js  11.8 kB       0  [emitted]  main
   [0] ./runoob1.js 76 bytes {0} [built]
   [5] ./runoob2.js 46 bytes {0} [built]
    + 4 hidden modules

ブラウザでアクセスすると、出力結果は次のようになります:

Webpack 入門チュートリアル

require CSS ファイルはローダーで書き込む必要がありますもちろん、prefix!style-loader!css-loader! を使用すると、モジュールの種類 (拡張子) に応じて必要なローダーを自動的にバインドできます。 runoob1.js の require("!style-loader!css-loader!./style.css") を require("./style.css") に変更します:

runoob1.js File

require("./style.css");
document.write(require("./runoob2.js"));

次に実行:

webpack runoob1.js bundle.js --module-bind &#39;css=style-loader!css-loader&#39;

ブラウザでアクセスすると、出力結果は次のようになります:

Webpack 入門チュートリアル

明らかに、これはローダーを使用する 2 つの方法は同じ効果があります。

#設定ファイル

統合管理のために、いくつかのコンパイルオプションを設定ファイルに追加できます。

webpack.config.js ファイルを作成します。コードは次のとおりです:

module.exports = {
    entry: "./runoob1.js",
    output: {
        path: __dirname,
        filename: "bundle.js"
    },
    module: {
        loaders: [
            { test: /\.css$/, loader: "style-loader!css-loader" }
        ]
    }
};

次に、webpack コマンドを実行して、bundle.js ファイルを生成するだけです:

webpack
 
Hash: 4fdefac099a5f36ff74b
Version: webpack 1.12.13
Time: 576ms
    Asset     Size  Chunks             Chunk Names
bundle.js  11.8 kB       0  [emitted]  main
   [0] ./runoob1.js 65 bytes {0} [built]
   [5] ./runoob2.js 46 bytes {0} [built]
    + 4 hidden modules

webpack コマンド実行後、デフォルトで現在のディレクトリにある webpack.config.js ファイルがロードされます。

プラグイン

プラグインは、webpack の設定情報の plugins オプションで指定され、いくつかのタスクを完了するために使用されます。ローダーでは完了できません。

Webpack にはいくつかのプラグインが付属しており、cnpm を通じていくつかのプラグインをインストールできます。

使用内置插件需要通过以下命令来安装：

cnpm install webpack --save-dev

比如我们可以安装内置的 BannerPlugin 插件，用于在文件头部输出一些注释信息。

修改 webpack.config.js，代码如下：

var webpack=require(&#39;webpack&#39;);
 
module.exports = {
    entry: "./runoob1.js",
    output: {
        path: __dirname,
        filename: "bundle.js"
    },
    module: {
        loaders: [
            { test: /\.css$/, loader: "style-loader!css-loader" }
        ]
    },
    plugins:[
    new webpack.BannerPlugin(&#39;菜鸟教程 webpack 实例&#39;)
    ]
};

然后运行:

webpack

打开 bundle.js，可以看到文件头部出现了我们指定的注释信息。

开发环境

当项目逐渐变大，webpack 的编译时间会变长，可以通过参数让编译的输出内容带有进度和颜色。

webpack --progress --colors

如果不想每次修改模块后都重新编译，那么可以启动监听模式。开启监听模式后，没有变化的模块会在编译后缓存到内存中，而不会每次都被重新编译，所以监听模式的整体速度是很快的。

webpack --progress --colors --watch

当然，我们可以使用 webpack-dev-server 开发服务，这样我们就能通过 localhost:8080 启动一个 express 静态资源 web 服务器，并且会以监听模式自动运行 webpack，在浏览器打开 http://localhost:8080/ 或 http://localhost:8080/webpack-dev-server/ 可以浏览项目中的页面和编译后的资源输出，并且通过一个 socket.io 服务实时监听它们的变化并自动刷新页面。

# 安装
cnpm install webpack-dev-server -g
 
# 运行
webpack-dev-server --progress --colors

在浏览器打开 http://localhost:8080/ 输出结果如下：

Webpack 入門チュートリアル

相关教程推荐：webpack 中文文档

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

声明：

この記事はrunoob.comで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。

前の記事：JSにおけるクロージャの概念を詳しく解説（例付き）次の記事：JSにおけるクロージャの概念を詳しく解説（例付き）

続きを見る