webpack+express を使用して複数ページのサイト開発を実装する手順-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

webpack+express を使用して複数ページのサイト開発を実装する手順

Apr 13, 2018 pm 05:31 PM

web 成し遂げる

今回は、webpack+express のマルチページサイト開発を実装する手順について説明します。webpack+express のマルチページサイト開発の注意事項は何ですか?実際の事例を見てみましょう。

webpack の入門レベルのチュートリアルを学習した後、webpack+react、webpack+vue などの単一ページアプリケーション向けにカスタマイズされている可能性があると感じました。これにより、依存関係の読み込みとパッケージ化の問題を解決できます。さまざまなリソース。 CSS も js にパッケージ化され、動的に dom ドキュメントに追加されます。

では、複数のページを持つ通常の Web サイトが必要な場合、CSS は独立しており、JS の読み込みにはモジュールが必要ですか?

プロジェクトアドレス: webpackDemo_jb51.rar

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

package.json

"devDependencies": {
  "css-loader": "^0.23.1",
  "extract-text-webpack-plugin": "^1.0.1",
  "file-loader": "^0.8.5",
  "html-loader": "^0.4.3",
  "html-webpack-plugin": "^2.9.0",
  "jquery": "^1.12.0",
  "less": "^2.6.0",
  "less-loader": "^2.2.2",
  "sass-loader": "^4.0.2",
  "style-loader": "^0.13.0",
  "url-loader": "^0.5.7",
  "webpack": "^1.12.13",
  "webpack-dev-server": "^1.14.1"
}

ログイン後にコピー

ディレクトリ構造 (私はExpressフレームワークを使用していますが、その他は個人的なニーズに基づいています)

- webpackDemo
  - src        #代码开发目录
    - css      #css目录，按照页面（模块）、通用、第三方三个级别进行组织
      + page
      + common
      + lib
    - js       #JS脚本，按照page、components进行组织
      + page
      + components
    + template      #HTML模板
  - node_modules    #所使用的nodejs模块
  - public            #express静态资源文件
    - dist            #webpack编译打包输出目录，无需建立目录可由webpack根据配置自动生成
      + css        
      + js
    + img      #图片资源
  + view            #express静态资源文件（webpack编译打包输出view目录）
  package.json      #项目配置
  webpack.config.js  #webpack配置

ログイン後にコピー

開発ページ

src/js/page ディレクトリにindex.js ファイルを作成し、src/view ディレクトリにindex.html ファイルを作成します。エントリ js はテンプレートファイル名に対応します。

Index.html の内容は以下の通りです:

&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;
  &lt;meta charset=&quot;UTF-8&quot;&gt;
  &lt;title&gt;首页&lt;/title&gt;
  &lt;!--
    描述：head中无需再引入css以及facicon，webpack将根据入口JS文件的要求自动实现按需加载或者生成style标签
  --&gt;
&lt;/head&gt;
&lt;body&gt;
  &lt;!--
    描述：body中同样无需单独引入JS文件，webpack会根据入口JS文件自动实现按需加载或者生成script标签，还可以生成对应的hash值
  --&gt;
&lt;/body&gt;
&lt;/html&gt;

ログイン後にコピー

これは非常にシンプルな HTML テンプレートであり、CSS や JS を導入する必要はありません。Webpack パッケージ化によって自動的に導入されます。

Index.js の内容は以下の通りです:

//引入css
require("../../css/lib/base.css");
require("../../css/page/index.scss");
$('body').append('&lt;p class=&quot;text&quot;&gt;index&lt;/p&gt;');

ログイン後にコピー

page1.html:

りぃ

page1.js:

りぃ

Webpack の設定 (私は Express フレームワークを使用していますが、その他は個人的なニーズに基づいています)

&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;
  &lt;meta charset=&quot;UTF-8&quot;&gt;
  &lt;title&gt;page1&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;/body&gt;
&lt;/html&gt;

ログイン後にコピー

上記の設定が完了したら、

package コマンドを実行してプロジェクトのパッケージ化を完了します。 webpackりー

この時点で、次のように、views ディレクトリに移動して、生成された Index.html ファイルを表示します。生成されたファイルには、元のテンプレートのコンテンツが保持されているだけでなく、導入する必要がある CSS ファイルと JS ファイル、およびエントリファイルindex.js の定義に従ってファビコンも自動的に追加されていることがわかります。対応するハッシュ値も追加します。

2つの質問

Webpack はどのようにしてエントリファイルを自動的に検出し、対応するテンプレートを設定しますか? スタイルとスクリプトの自動導入を直接処理するにはどうすればよいですか? 次のコードは上記のコードと似ていますが、本質的な違いは、すべての関連ファイルがメソッドを通じてオブジェクトに配置され、自動導入効果が完了することです。

上記はすべて Mac OSX システムでの設定であり、Win7 のパスは異なる場合があります
glob: ここでの分析は異なります:
しかし、リクエストは最終的なものです
```
//引入css
require("../../css/lib/base.css");
require("../../css/page/page1.less");
$('body').html('page1');
```
ログイン後にコピー
パソコンの構成に応じて対応する変更を加える必要があります

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

複数のスクロールバーをネイティブJSと同期する方法

vue2-webpack2フレームワークを構築する方法

mint-ui 無限スクロール読み込み機能を実装する方法

以上がwebpack+express を使用して複数ページのサイト開発を実装する手順の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。