今回は、webpack モジュラー管理およびパッケージ化ツールの使用方法と、webpack モジュラー管理およびパッケージ化ツールを使用する際の注意点について説明します。以下は実際のケースです。
Webpack の紹介
webpack は、現在最も人気のあるフロントエンド リソースのモジュラー管理およびパッケージ化ツールです。 依存関係とルールに従って、運用環境の展開と一貫性のあるフロントエンド リソースに多くの緩いモジュールをパッケージ化できます。オンデマンドでロードされるモジュールのコードを分離し、実際に必要なときに非同期でロードすることもできます。ローダー変換により、CommonJs モジュール、AMD モジュール、ES6 モジュール、CSS、画像、JSON、Coffeescript、LESS など、あらゆる形式のリソースをモジュールとみなすことができます。
モジュール システム<script> タグの進化</script>
<script></script> <script></script> <script></script> <script></script>
これは、各ファイルがモジュールと見なされる場合、通常、そのインターフェイスはグローバル スコープで公開されます。 window オブジェクトでは、異なるモジュールのインターフェイス呼び出しが同じスコープ内にあります。一部の複雑なフレームワークでは、名前空間の概念を使用してこれらのモジュールのインターフェイスを編成します。典型的な例は YUI ライブラリです。
この独自の読み込み方法には、明らかな欠点がいくつかあります。
グローバル スコープで変数の競合が発生しやすいです
ファイルは <script> の書き込み順序でのみ読み込むことができます </script>
開発者の依存関係モジュールとコードベースの間の問題は主観的に解決する必要があります
大規模なプロジェクトでは、さまざまなリソースの管理が難しく、長期にわたって蓄積された問題はコードベースの混乱につながります
- CommonJS仕様
CommonJSつまり、サーバー環境やデスクトップ環境など、サーバー環境の外側に JavaScript エコシステムを構築するという目標を持ってプロジェクトを参照していることになります。 CommonJS 仕様は、JavaScript のスコープ問題を解決するために定義されたモジュール形式であり、各モジュールが独自の名前空間で実行できるようにします。この仕様の主な内容は、モジュールが module.exports を通じて外部変数またはインターフェイスをエクスポートし、require() を通じて他のモジュールの出力を現在のモジュール スコープにインポートする必要があるということです。
直感的な例
// moduleA.js module.exports = function( value ){ return value * 2; } // moduleB.js var multiplyBy2 = require('./moduleA'); var result = multiplyBy2(4);
AMD仕様
AMD (非同期モジュール定義) はブラウザ環境向けに設計されています。これは、CommonJS モジュール システムが同期的にロードされ、現在のブラウザ環境は同期ロードの準備ができていないためです。 モジュール条件。 モジュールは、define 関数を使用してクロージャ内で次の形式で定義されます:
define(id?: String, dependencies?: String[], factory: Function|Object);
id はモジュールの名前であり、オプションのパラメーターです。
factory は最後のパラメータで、モジュールの特定の実装 (関数またはオブジェクト) をラップします。関数の場合、戻り値は出力インターフェイスまたはモジュールの値です。
いくつかの使用例
jQuery モジュールに依存する myModule という名前のモジュールを定義します。
define('myModule', ['jquery'], function($) { // $ 是 jquery 模块的输出 $('body').text('hello world'); }); // 使用 require(['myModule'], function(myModule) {});
注: Webpack では、モジュール名はローカル スコープのみを持ちます。Require.js では、モジュール名はグローバル スコープを持ち、グローバル スコープを持ちます。世界中で使用されています。
通常、アプリケーションの起動関数として使用される、ID 値のない匿名モジュールを定義します。
define(['jquery'], function($) { $('body').text('hello world'); });
AMD もモジュールをロードするために require() ステートメントを使用しますが、CommonJS とは異なり、2 つのパラメーターが必要です
最初のパラメーター [ module] は配列であり、内部のメンバーはロードされるモジュールです。2 番目のパラメータ callback は、ロードが成功した後のコールバック関数です。前のコードを AMD 形式に書き直すと、次のようになります:
math.add() と math モジュールの読み込みは同期されず、ブラウザはフリーズしません。したがって、明らかに、AMD はブラウザ環境に適しています。現在、AMD 仕様を実装する 2 つの主要な Javascript ライブラリは、 require.js とcurl.js です。モジュールの依存関係に基づいて静的分析を実行し、指定されたルールに従ってこれらのモジュールに対応する静的リソースを生成します。
Webpackの機能
コード分割
ローダー 智能解析 插件系统 快速运行 webpack基本使用 创建项目根目录 初始化 全局安装 局部安装,在项目目录下安装 --save: 将安装的包的信息保存在package中 --dev:开发版本,只是项目构建的时候使用,项目构建完成后并不依赖的文件 如果使用web开发工具,单独安装 基本使用 首先创建一个静态页面 index.html 和一个 JS 入口文件 entry.js: 创建entry.js 然后编译 entry.js并打包到 bundle.js文件中 使用模块 1.创建模块module.js,在内部导出内容 2.在entry.js中使用自定义的模块 加载css模块 1.安装css-loader 2.创建css文件 3.修改 entry.js: 创建配置文件webpack.config.js 1.创建文件 2.修改 entry.js 中的 style.css 加载方式:require('./style.css') 3.运行webpack 在命令行页面直接输入webpack 插件使用 1.插件安装 2.配置文件的书写 3.运行webpack 开发环境 webpack --progress : 显示编译的进度 --colors : 带颜色显示,美化输出 --watch : 开启监视器,不用每次变化后都手动编译 12.4.7.1. webpack-dev-server 开启服务,以监听模式自动运行 1.安装包 2.启动服务 实时监控页面并自动刷新 自动编译 1.安装插件 2.在配置文件中导入包 3.在配置文件中使用插件 4.运行项目 相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章! 推荐阅读:npm init 或 npm init -y
npm install webpack -g
npm install webpack --save-dev
npm install webpack-dev-server --save-dev
<!-- index.html -->
<meta>
<script></script>
// entry.js : 在页面中打印出一句话
document.write('It works.')
// 使用npm命令
webpack entry.js bundle.js
module.exports = 'It works from module.js'
//entry.js
document.write('It works.')
document.write(require('./module.js')) // 添加模块
npm install css-loader style-loader --save-dev
//style.css
body { background: yellow; }
require("!style-loader!css-loader!./style.css") // 载入 style.css
document.write('It works.')
document.write(require('./module.js'))
var webpack = require('webpack')
module.exports = {
entry: './entry.js',
output: {
path: __dirname,
filename: 'bundle.js'
},
module: {
loaders: [
//同时简化 entry.js 中的 style.css 加载方式:require('./style.css')
{test: /\.css$/, loader: 'style-loader!css-loader'}
]
}
}
//添加注释的插件
npm install --save-devbannerplugin
var webpack = require('webpack')
module.exports = {
entry: './entry.js',
output: {
path: __dirname,
filename: 'bundle.js'
},
module: {
loaders: [
//同时简化 entry.js 中的 style.css 加载方式:require('./style.css')
{
test: /\.css$/,
loader: 'style-loader!css-loader'
}
],
plugins: [
//添加注释的插件
new webpack.BannerPlugin('This file is created by zhaoda')
]
}
}
// 可以在bundle.js的头部看到注释信息
/*! This file is created by zhaoda */
npm install webpack-dev-server -g --save-dev
webpack-dev-server --progress --colors
npm install --save-dev html-webpack-plugin
var htmlWebpackPlugin = require('html-webpack-plugin')
plugins: [
//添加注释的插件
new webpack.BannerPlugin('This file is created by zhaoda'),
//自动编译
new htmlWebpackPlugin({
title: "index",
filename: 'index.html', //在内存中生成的网页的名称
template: './index.html' //生成网页名称的依据
})
]
webpack--save-dev
以上がwebpack モジュラー管理およびパッケージ化ツールの使用方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

JavaScriptは、Webページのインタラクティブ性とダイナミズムを向上させるため、現代のWebサイトの中心にあります。 1)ページを更新せずにコンテンツを変更できます。2)Domapiを介してWebページを操作する、3)アニメーションやドラッグアンドドロップなどの複雑なインタラクティブ効果、4)ユーザーエクスペリエンスを改善するためのパフォーマンスとベストプラクティスを最適化します。

CおよびJavaScriptは、WebAssemblyを介して相互運用性を実現します。 1)CコードはWebAssemblyモジュールにコンパイルされ、JavaScript環境に導入され、コンピューティングパワーが強化されます。 2)ゲーム開発では、Cは物理エンジンとグラフィックスレンダリングを処理し、JavaScriptはゲームロジックとユーザーインターフェイスを担当します。

JavaScriptは、Webサイト、モバイルアプリケーション、デスクトップアプリケーション、サーバー側のプログラミングで広く使用されています。 1)Webサイト開発では、JavaScriptはHTMLおよびCSSと一緒にDOMを運用して、JQueryやReactなどのフレームワークをサポートします。 2)ReactNativeおよびIonicを通じて、JavaScriptはクロスプラットフォームモバイルアプリケーションを開発するために使用されます。 3)電子フレームワークにより、JavaScriptはデスクトップアプリケーションを構築できます。 4)node.jsを使用すると、JavaScriptがサーバー側で実行され、高い並行リクエストをサポートします。

Pythonはデータサイエンスと自動化により適していますが、JavaScriptはフロントエンドとフルスタックの開発により適しています。 1. Pythonは、データ処理とモデリングのためにNumpyやPandasなどのライブラリを使用して、データサイエンスと機械学習でうまく機能します。 2。Pythonは、自動化とスクリプトにおいて簡潔で効率的です。 3. JavaScriptはフロントエンド開発に不可欠であり、動的なWebページと単一ページアプリケーションの構築に使用されます。 4. JavaScriptは、node.jsを通じてバックエンド開発において役割を果たし、フルスタック開発をサポートします。

CとCは、主に通訳者とJITコンパイラを実装するために使用されるJavaScriptエンジンで重要な役割を果たします。 1)cは、JavaScriptソースコードを解析し、抽象的な構文ツリーを生成するために使用されます。 2)Cは、Bytecodeの生成と実行を担当します。 3)Cは、JITコンパイラを実装し、実行時にホットスポットコードを最適化およびコンパイルし、JavaScriptの実行効率を大幅に改善します。

現実世界でのJavaScriptのアプリケーションには、フロントエンドとバックエンドの開発が含まれます。 1)DOM操作とイベント処理を含むTODOリストアプリケーションを構築して、フロントエンドアプリケーションを表示します。 2)node.jsを介してRestfulapiを構築し、バックエンドアプリケーションをデモンストレーションします。

Web開発におけるJavaScriptの主な用途には、クライアントの相互作用、フォーム検証、非同期通信が含まれます。 1)DOM操作による動的なコンテンツの更新とユーザーインタラクション。 2)ユーザーエクスペリエンスを改善するためにデータを提出する前に、クライアントの検証が実行されます。 3)サーバーとのリフレッシュレス通信は、AJAXテクノロジーを通じて達成されます。

JavaScriptエンジンが内部的にどのように機能するかを理解することは、開発者にとってより効率的なコードの作成とパフォーマンスのボトルネックと最適化戦略の理解に役立つためです。 1)エンジンのワークフローには、3つの段階が含まれます。解析、コンパイル、実行。 2)実行プロセス中、エンジンはインラインキャッシュや非表示クラスなどの動的最適化を実行します。 3)ベストプラクティスには、グローバル変数の避け、ループの最適化、constとletsの使用、閉鎖の過度の使用の回避が含まれます。


ホットAIツール

Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

人気の記事

ホットツール

SublimeText3 中国語版
中国語版、とても使いやすい

SublimeText3 英語版
推奨: Win バージョン、コードプロンプトをサポート!

SublimeText3 Linux 新バージョン
SublimeText3 Linux 最新バージョン

WebStorm Mac版
便利なJavaScript開発ツール

mPDF
mPDF は、UTF-8 でエンコードされた HTML から PDF ファイルを生成できる PHP ライブラリです。オリジナルの作者である Ian Back は、Web サイトから「オンザフライ」で PDF ファイルを出力し、さまざまな言語を処理するために mPDF を作成しました。 HTML2FPDF などのオリジナルのスクリプトよりも遅く、Unicode フォントを使用すると生成されるファイルが大きくなりますが、CSS スタイルなどをサポートし、多くの機能強化が施されています。 RTL (アラビア語とヘブライ語) や CJK (中国語、日本語、韓国語) を含むほぼすべての言語をサポートします。ネストされたブロックレベル要素 (P、DIV など) をサポートします。
