今回は、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 の内容は以下の通りです:<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>首页</title> <!-- 描述:head中无需再引入css以及facicon,webpack将根据入口JS文件的要求自动实现按需加载或者生成style标签 --> </head> <body> <!-- 描述:body中同样无需单独引入JS文件,webpack会根据入口JS文件自动实现按需加载或者生成script标签,还可以生成对应的hash值 --> </body> </html>
//引入css require("../../css/lib/base.css"); require("../../css/page/index.scss"); $('body').append('<p class="text">index</p>');
りぃ
page1.js:りぃ
Webpack の設定 (私は Express フレームワークを使用していますが、その他は個人的なニーズに基づいています)<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>page1</title> </head> <body> </body> </html>
package コマンドを実行してプロジェクトのパッケージ化を完了します。 webpack
りー
2つの質問
Webpack はどのようにしてエントリ ファイルを自動的に検出し、対応するテンプレートを設定しますか? スタイルとスクリプトの自動導入を直接処理するにはどうすればよいですか? 次のコードは上記のコードと似ていますが、本質的な違いは、すべての関連ファイルがメソッドを通じてオブジェクトに配置され、自動導入効果が完了することです。
//引入css require("../../css/lib/base.css"); require("../../css/page/page1.less"); $('body').html('page1');
複数のスクロールバーをネイティブJSと同期する方法
vue2-webpack2フレームワークを構築する方法以上がwebpack+express を使用して複数ページのサイト開発を実装する手順の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。