Webpackをベースとしたフロントエンドエンジニアリング開発ソリューションの模索(1): HTML_html/css_WEB-ITnoseを動的に生成する

皆さん、こんにちは！前の 3 つの章では、webpack を使用してフロントエンドのモジュラー パッケージ化作業を完了する方法を共有し、webpack の入門とみなすことができるいくつかの簡単な実装例を添付しました。

この章から、Webpack を使用してフロントエンド エンジニアリング開発を完了する方法を順次紹介していきます。

1. エンジニアリング開発とは

ソフトウェアエンジニアリングにおけるエンジニアリング開発の概念は古くからありますが、フロントエンド開発の場合、VS や Eclipse のようなオーダーメイドの IDE はありません。ほとんどの人の目には、フロントエンド コードをコンパイルする必要はないため、実行とデバッグにはブラウザーのみが必要です。しかし今日、インターネット、特にモバイル インターネットにより、フロントエンド開発の機会が増大していると同時に、フロントエンド コードはますます複雑になり、管理が困難になりました。開発は急務であると言えます。

では、フロントエンドエンジニアの燃えるような問題を解決するには、フロントエンドエンジニアリング開発には何が必要でしょうか？個人的には、少なくとも次の点が含まれていると考えています:

1. プロジェクトの初期化、構文プロンプト、プロジェクトのコンパイル、パッケージ化などを含む、プロフェッショナルな IDE サポート。

2. モジュール化された優れたコード管理構造により、作成したコンポーネントやコードの再利用性が高まり、同時に、サードパーティのコンポーネントとの互換性も高まります。

3. コンポーネントの単体テストとページの統合テストを同時に完了するための、シンプルで構成が簡単なフロントエンド テスト環境。エラーと詳細なエラー情報を適切に特定できる優れた DEBUG 環境を提供します。 。

4. 静的リソース (画像/フォント/CSS/JS など) の優れた管理ソリューション、1 つは静的ファイルのバージョンの問題、もう 1 つは HTTP リクエストを減らすために小さなアイコンを自動的に BASE64 に変換することです

5.完全なコードのバージョン管理、パッケージ化、公開、マルチ環境展開、テストのフィードバック、その他の運用保守サポート

もちろん、上記は単なる個人的な意見です。企業ごと、プロジェクトごとに異なり、求められる条件も異なります。

上記の要件は基本的に過去には想像できなかったもので、これらのツールはすべてファイル システムまたはネットワークにアクセスする必要があり、比較的完全なソリューションはほとんどありません。 (そうですね、初期の頃は Ant に似た Java ソリューションがありましたが、フロントエンド開発者にとって要求が多すぎて、あまり使いやすいものではありませんでした。) 幸いなことに、優れた NodeJ が誕生し、それ以来、多くの優れたフレームワークがこれに基づいて登場してきました。 Grunt や Gulp などの NodeJ 上で。

さて、今日のテーマはwebpackです！ webpack が新星としてフロントエンド エンジニアリングをどのようにサポートしているかを見てみましょう。

2. HTML を動的に生成する

ここで言う HTML の動的生成とは、ブラウザーのフラグメントの実行時に JS を使用して HTML を生成するのではなく、webpack を使用して最終的に期待する HTML ファイルを動的に生成することを意味することに注意してください。 。

では、なぜ HTML を動的に生成する必要があるのでしょうか? 自分で書くことはできないのでしょうか?答えはもちろん「はい」です。

動的生成の理由は主に、フロントエンドリソースのパッケージ化が完了した後、webpack がパッケージ化されたリソースのパスとバージョン番号を HTML に自動的に書き込み、自動化効果を達成することを期待するためです。

以前の 3 つの記事で紹介した事例を思い出してください。その実践プロジェクトでは、ページのスクリプト タグが自分たちで書かれていました。では、JS にバージョン番号を追加する必要がある場合、どうすればよいでしょうか。毎回修正する必要はないのでしょうか？ JS に埋め込まれた CSS もあります。JS を読み込んだ後、style タグを作成し、CSS コンテンツを記述します。これを行うと、ブラウザは CSS スタイルを生成する前に JS がロードされるまで待つ必要があり、ページ上で待機プロセスが発生し、このプロセスの間、ページにはスタイルがまったく存在しません。これは確かに私たちが望んでいることではありません。

私たちの目標は次のとおりです: webpack は、指定されたテンプレートに従って、パッケージ化されコンパイルされた CSS ファイルのパスを挿入します。また、両方にバージョン番号を追加する必要があります。さらに、HTML を同時に圧縮して、ファイル サイズをさらに小さくすることもできます。

3. プロジェクトを初期化し、依存関係をインストールします

ここでの開発環境には、npm と webpack がデフォルトでインストールされています。まだインストールしていない学生は、自分でインストールできます。

A. 新しい空のプロジェクトを作成し、 npm init でプロジェクトを初期化し、プロンプトに従ってプロジェクトの基本情報を入力し、package.json ファイルを生成します。このファイルには、二次移植と開発を容易にするためにインストールしようとしている npm プラグイン情報の一部が保存されます。

B. プロジェクトのインストールに必要な依存関係:

npm install css-loader jquery@1 style-loader html-webpack-plugin --save-dev
npm install extract-text-webpack-plugin --save - 開発者

順に、cssローダー、jquery、スタイルローダー、HTML生成プラグイン、ファイル抽出プラグインです。最後に、package.jsonの依存ステートメントが更新されます。

"devDependencies": {    "css-loader": "^0.23.0",    "extract-text-webpack-plugin": "^0.9.1",    "html-webpack-plugin": "^1.7.0",    "jquery": "^1.11.3",    "style-loader": "^0.13.0",    "webpack": "^1.12.9",    "webpack-dev-server": "^1.14.0" }

dist ディレクトリには、表示の都合上、サブディレクトリを作成する必要はありません。js/css/html は個別に保存されます。

次に、src ディレクトリにいくつかのテスト ファイルを作成します。詳細なコードについては、https://github.com/xiaoyunchen/webpack/tree/master/src にアクセスしてソース コードを参照してください。

まず、index.js の内容を見てみましょう:

- webapp    - src                #代码开发目录        - css            #css目录，按照页面（模块）、通用、第三方三个级别进行组织            + page            + common            + lib        + img            #图片资源        - js            #JS脚本，按照page、components进行组织            + page        + view            #HTML模板    - dist                #webpack编译打包输出目录，同样按照css/js/img进行组织        + css                        + js        + view    + node_modules        #所使用的nodejs模块    package.json        #项目配置    webpack.config.js    #webpack配置    README.md            #项目说明

コードは非常にシンプルで、主にいくつかの CSS ファイルが導入されています。 /view/index.html テンプレートの内容をもう一度見てください

1 //引入CSS2 require("../../css/lib/reset.css");3 require("../../css/common/global.css");4 require("../../css/page/index.css");5 6 document.write('Hello Index Js');

これは、ここでは CSS と JS を導入していないことに注意してください。webpack を通じてパッケージ化したいと考えています。自動的に生成されます。 (ここのテンプレートは Blueimp もサポートしています)

5. Webpack の設定

最後はハイライトである webpack.config.js で、必要を満たすためにいくつかの Webpack タスクを設定します。この設定ファイルについては以前の記事で何度も説明しているので、ここでは詳しく説明しません。より重要なポイントのいくつかのみを分析します:

行 17: css ローダーですが、ここではファイルが代わりに使用されています。プラグインを削除し、CSS を抽出して別のファイルとして保存します。

21行目: 抽出したCSSファイル名と保存先のパスを設定します

22行目: html-webpack-plugin これは、webpackでHTMLを生成するプラグインです。詳細な設定手順が記載されています。

23行目: webpack経由で導入できるファビコンを設定し、ハッシュ値を生成します

24行目: 最終的に生成されるHTMLファイルの保存パスを設定します

25行目: 使用するテンプレート

26行目: 何をコンテンツは webpack によって変更できますか? 選択された値は head と body です。 true の場合、両方とも変更できます。 28 行目: 最終的に生成された HTML ファイルを圧縮します。 html-minifer を使用して、関連する構成パラメーターを表示します。 (後で閲覧しやすいように、ここでは HTML 内の空白文字と改行文字は削除されません。)

OK、プロジェクトのルート ディレクトリで

webpack

packaging コマンドを実行して、プロジェクトのパッケージ化を完了しましょう:

パッケージ化が成功したら、/dist/view ディレクトリに移動して、生成されたindex.html がどのようなものかを確認します

<!DOCTYPE html><html>    <head>        <meta charset="utf-8">        <title>Index主页</title>        <meta name="author" content="https://github.com/xiaoyunchen/webpack"/>        <meta name="date" content="2015-12-3"/>        <meta name="description" content="基于webpack的前端工程化开发解决方案探索"/>        <!--            作者：https://github.com/xiaoyunchen/webpack            时间：2015-12-03            描述：head中无需再引入css以及facicon，webpack将根据入口JS文件的要求自动实现按需加载或者生成style标签        -->    </head>    <body>        <p>Hello,Webpack!!</p>        <!--            作者：chyun532@qq.com            时间：https://github.com/xiaoyunchen/webpack            描述：body中同样无需单独引入JS文件，webpack会根据入口JS文件自动实现按需加载或者生成script标签，还可以生成对应的hash值        -->    </body></html>

元のテンプレートのコンテンツが保持されていることに加えて、生成されたファイルがまた、エントリファイルindex.jsの定義に基づいて要件を自動的に追加します。CSSファイルとJSファイル、およびfaviconを導入し、対応するハッシュ値も追加します。

このファイルを実行すると、コードは正常で、インポートされたファイルのパスもOKであることがわかります。

はい、HTMLを動的に生成するという当初の目的は達成されました。

Webpack は、指定されたテンプレートに従って、パッケージ化されコンパイルされた CSS ファイルのパスを挿入します。

パッケージ化され、生成された JS のファイル パスを挿入します。また、両方にバージョン番号を追加する必要があります。

さらに、HTMLも同時に圧縮してファイルサイズをさらに小さくすることもできます。

今日のシェアはここまでです。まだいくつか疑問があるかもしれません: オンデマンドで読み込まれる JS/CSS も抽出されますか?次の章でも引き続きこの問題について検討していきます。