webpack モジュラー管理およびパッケージ化ツールの使用方法

今回は、webpack モジュラー管理およびパッケージ化ツールの使用方法と、webpack モジュラー管理およびパッケージ化ツールを使用する際の 注意事項 を説明します。実際の事例を見てみましょう。

Webpack の紹介

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

モジュール システム タグの進化

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

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

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

ファイルは の書き込み順序でのみ読み込むことができます

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

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

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 的特点

代码拆分

Loader

智能解析

插件系统

快速运行

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：

创建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中文网其它相关文章！