検索
ホームページウェブフロントエンドjsチュートリアルwebpack モジュラー管理およびパッケージ化ツールの使用方法

今回は、webpack モジュラー管理およびパッケージ化ツールの使用方法と、webpack モジュラー管理およびパッケージ化ツールを使用する際の注意点について説明します。以下は実際のケースです。

Webpack の紹介

webpack は、現在最も人気のあるフロントエンド リソースのモジュラー管理およびパッケージ化ツールです。 依存関係とルールに従って、運用環境の展開と一貫性のあるフロントエンド リソースに多くの緩いモジュールをパッケージ化できます。オンデマンドでロードされるモジュールのコードを分離し、実際に必要なときに非同期でロードすることもできます。ローダー変換により、CommonJs モジュール、AMD モジュール、ES6 モジュール、CSS、画像、JSON、Coffeescript、LESS など、あらゆる形式のリソースをモジュールとみなすことができます。

モジュール システム<script> タグの進化</script>

<script></script>
<script></script>
<script></script>
<script></script>

これは、各ファイルがモジュールと見なされる場合、通常、そのインターフェイスはグローバル スコープで公開されます。 window オブジェクトでは、異なるモジュールのインターフェイス呼び出しが同じスコープ内にあります。一部の複雑なフレームワークでは、名前空間の概念を使用してこれらのモジュールのインターフェイスを編成します。典型的な例は YUI ライブラリです。

この独自の読み込み方法には、明らかな欠点がいくつかあります。

グローバル スコープで変数の競合が発生しやすいです

  1. ファイルは <script> の書き込み順序でのみ読み込むことができます </script>

  2. 開発者の依存関係モジュールとコードベースの間の問題は主観的に解決する必要があります

  3. 大規模なプロジェクトでは、さまざまなリソースの管理が難しく、長期にわたって蓄積された問題はコードベースの混乱につながります

  4. 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基本使用

    创建项目根目录

    初始化

    npm init 或 npm init -y

    全局安装

    npm install webpack -g

    局部安装,在项目目录下安装

    npm install webpack --save-dev

    --save: 将安装的包的信息保存在package中

    --dev:开发版本,只是项目构建的时候使用,项目构建完成后并不依赖的文件

    如果使用web开发工具,单独安装

    npm install webpack-dev-server --save-dev

    基本使用

    首先创建一个静态页面 index.html 和一个 JS 入口文件 entry.js:

    <!-- index.html -->
    
    
    <meta>
    
    
    <script></script>
    
    

    创建entry.js

    // entry.js : 在页面中打印出一句话
    document.write('It works.')

    然后编译 entry.js并打包到 bundle.js文件中

    // 使用npm命令 
    webpack entry.js bundle.js

    使用模块

    1.创建模块module.js,在内部导出内容

    module.exports = 'It works from module.js'

    2.在entry.js中使用自定义的模块

    //entry.js
    document.write('It works.')
    document.write(require('./module.js')) // 添加模块

    加载css模块

    1.安装css-loader

    npm install css-loader style-loader --save-dev

    2.创建css文件

    //style.css
    body { background: yellow; }

    3.修改 entry.js:

    require("!style-loader!css-loader!./style.css") // 载入 style.css
    document.write('It works.')
    document.write(require('./module.js'))

    创建配置文件webpack.config.js

    1.创建文件

    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'}
      ]
     }
    }

    2.修改 entry.js 中的 style.css 加载方式:require('./style.css')

    3.运行webpack

    在命令行页面直接输入webpack

    插件使用

    1.插件安装

    //添加注释的插件
    npm install --save-devbannerplugin

    2.配置文件的书写

    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')
        ]
      }
    }

    3.运行webpack

    // 可以在bundle.js的头部看到注释信息
    /*! This file is created by zhaoda */

    开发环境

    webpack

    --progress : 显示编译的进度

    --colors : 带颜色显示,美化输出

    --watch : 开启监视器,不用每次变化后都手动编译

    12.4.7.1. webpack-dev-server

    开启服务,以监听模式自动运行

    1.安装包

    npm install webpack-dev-server -g --save-dev

    2.启动服务

    实时监控页面并自动刷新

    webpack-dev-server --progress --colors

    自动编译

    1.安装插件

    npm install --save-dev html-webpack-plugin

    2.在配置文件中导入包

    var htmlWebpackPlugin = require('html-webpack-plugin')

    3.在配置文件中使用插件

    plugins: [
        //添加注释的插件
        new webpack.BannerPlugin('This file is created by zhaoda'),
        //自动编译
        new htmlWebpackPlugin({
          title: "index",
          filename: 'index.html', //在内存中生成的网页的名称
          template: './index.html' //生成网页名称的依据
        })
      ]

    4.运行项目

    webpack--save-dev

    相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

    推荐阅读:

    调用模式与this绑定

    在实战项目中怎样使用jquery layur弹出层

    以上がwebpack モジュラー管理およびパッケージ化ツールの使用方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

    声明
    この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
    JavaScriptの役割:WebをインタラクティブでダイナミックにするJavaScriptの役割:WebをインタラクティブでダイナミックにするApr 24, 2025 am 12:12 AM

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

    CおよびJavaScript:接続が説明しましたCおよびJavaScript:接続が説明しましたApr 23, 2025 am 12:07 AM

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

    Webサイトからアプリまで:JavaScriptの多様なアプリケーションWebサイトからアプリまで:JavaScriptの多様なアプリケーションApr 22, 2025 am 12:02 AM

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

    Python vs. JavaScript:ユースケースとアプリケーションと比較されますPython vs. JavaScript:ユースケースとアプリケーションと比較されますApr 21, 2025 am 12:01 AM

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

    JavaScript通訳者とコンパイラにおけるC/Cの役割JavaScript通訳者とコンパイラにおけるC/Cの役割Apr 20, 2025 am 12:01 AM

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

    JavaScript in Action:実際の例とプロジェクトJavaScript in Action:実際の例とプロジェクトApr 19, 2025 am 12:13 AM

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

    JavaScriptとWeb:コア機能とユースケースJavaScriptとWeb:コア機能とユースケースApr 18, 2025 am 12:19 AM

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

    JavaScriptエンジンの理解:実装の詳細JavaScriptエンジンの理解:実装の詳細Apr 17, 2025 am 12:05 AM

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

    See all articles

    ホットAIツール

    Undresser.AI Undress

    Undresser.AI Undress

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

    AI Clothes Remover

    AI Clothes Remover

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

    Undress AI Tool

    Undress AI Tool

    脱衣画像を無料で

    Clothoff.io

    Clothoff.io

    AI衣類リムーバー

    Video Face Swap

    Video Face Swap

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

    ホットツール

    SublimeText3 中国語版

    SublimeText3 中国語版

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

    SublimeText3 英語版

    SublimeText3 英語版

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

    SublimeText3 Linux 新バージョン

    SublimeText3 Linux 新バージョン

    SublimeText3 Linux 最新バージョン

    WebStorm Mac版

    WebStorm Mac版

    便利なJavaScript開発ツール

    mPDF

    mPDF

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