検索
ホームページウェブフロントエンド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 までご連絡ください。
    VUE3入门教程:使用Webpack进行打包和构建VUE3入门教程:使用Webpack进行打包和构建Jun 15, 2023 pm 06:17 PM

    Vue是一款优秀的JavaScript框架,它可以帮助我们快速构建交互性强、高效性好的Web应用程序。Vue3是Vue的最新版本,它引入了很多新的特性和功能。Webpack是目前最流行的JavaScript模块打包器和构建工具之一,它可以帮助我们管理项目中的各种资源。本文就为大家介绍如何使用Webpack打包和构建Vue3应用程序。1.安装Webpack

    vite和webpack的区别是什么vite和webpack的区别是什么Jan 11, 2023 pm 02:55 PM

    区别:1、webpack服务器启动速度比vite慢;由于vite启动的时候不需要打包,也就无需分析模块依赖、编译,所以启动速度非常快。2、vite热更新比webpack快;vite在HRM方面,当某个模块内容改变时,让浏览器去重新请求该模块即可。3、vite用esbuild预构建依赖,而webpack基于node。4、vite的生态不及webpack,加载器、插件不够丰富。

    如何使用PHP和webpack进行模块化开发如何使用PHP和webpack进行模块化开发May 11, 2023 pm 03:52 PM

    随着Web开发技术的不断发展,前后端分离、模块化开发已经成为了一个广泛的趋势。PHP作为一种常用的后端语言,在进行模块化开发时,我们需要借助一些工具来实现模块的管理和打包,其中webpack是一个非常好用的模块化打包工具。本文将介绍如何使用PHP和webpack进行模块化开发。一、什么是模块化开发模块化开发是指将程序分解成不同的独立模块,每个模块都有自己的作

    vue webpack可打包哪些文件vue webpack可打包哪些文件Dec 20, 2022 pm 07:44 PM

    在vue中,webpack可以将js、css、图片、json等文件打包为合适的格式,以供浏览器使用;在webpack中js、css、图片、json等文件类型都可以被当做模块来使用。webpack中各种模块资源可打包合并成一个或多个包,并且在打包的过程中,可以对资源进行处理,如压缩图片、将scss转成css、将ES6语法转成ES5等可以被html识别的文件类型。

    Webpack是什么?详解它是如何工作的?Webpack是什么?详解它是如何工作的?Oct 13, 2022 pm 07:36 PM

    Webpack是一款模块打包工具。它为不同的依赖创建模块,将其整体打包成可管理的输出文件。这一点对于单页面应用(如今Web应用的事实标准)来说特别有用。

    webpack怎么将es6转成es5的模块webpack怎么将es6转成es5的模块Oct 18, 2022 pm 03:48 PM

    配置方法:1、用导入的方法把ES6代码放到打包的js代码文件中;2、利用npm工具安装babel-loader工具,语法“npm install -D babel-loader @babel/core @babel/preset-env”;3、创建babel工具的配置文件“.babelrc”并设定转码规则;4、在webpack.config.js文件中配置打包规则即可。

    使用Spring Boot和Webpack构建前端工程和插件系统使用Spring Boot和Webpack构建前端工程和插件系统Jun 22, 2023 am 09:13 AM

    随着现代Web应用程序的复杂性不断增加,构建优秀的前端工程和插件系统变得越来越重要。随着SpringBoot和Webpack的流行,它们成为了一个构建前端工程和插件系统的完美组合。SpringBoot是一个Java框架,它以最小的配置要求来创建Java应用程序。它提供了很多有用的功能,比如自动配置,使开发人员可以更快、更容易地搭建和部署Web应用程序。W

    webpack处理css浏览器兼容性问题webpack处理css浏览器兼容性问题Aug 09, 2022 pm 02:50 PM

    本篇文章给大家带来了关于javascript的相关知识,其中主要介绍了关于webpack处理css浏览器兼容性的相关问题,包括了postcss-loader和postcss-preset-env插件使用的相关内容,下面一起来看一下,希望对大家有帮助。

    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衣類リムーバー

    AI Hentai Generator

    AI Hentai Generator

    AIヘンタイを無料で生成します。

    ホットツール

    WebStorm Mac版

    WebStorm Mac版

    便利なJavaScript開発ツール

    ドリームウィーバー CS6

    ドリームウィーバー CS6

    ビジュアル Web 開発ツール

    SublimeText3 Mac版

    SublimeText3 Mac版

    神レベルのコード編集ソフト(SublimeText3)

    DVWA

    DVWA

    Damn Vulnerable Web App (DVWA) は、非常に脆弱な PHP/MySQL Web アプリケーションです。その主な目的は、セキュリティ専門家が法的環境でスキルとツールをテストするのに役立ち、Web 開発者が Web アプリケーションを保護するプロセスをより深く理解できるようにし、教師/生徒が教室環境で Web アプリケーションを教え/学習できるようにすることです。安全。 DVWA の目標は、シンプルでわかりやすいインターフェイスを通じて、さまざまな難易度で最も一般的な Web 脆弱性のいくつかを実践することです。このソフトウェアは、

    ゼンドスタジオ 13.0.1

    ゼンドスタジオ 13.0.1

    強力な PHP 統合開発環境