ホームページ > 記事 > ウェブフロントエンド > webpack -- モジュールパッケージャーの詳細な説明
webpack が登場する前、すでに市場に存在していたモジュール管理およびパッケージ化ツールは、大規模なプロジェクト、特に単一ページの Web アプリケーションには適していませんでした。最も差し迫った理由は、大規模なコード ベースでさまざまなモジュール リソースの分割と保存を維持し、それらの間の依存関係を維持し、それらをシームレスに統合して、ブラウザ側の静的リソースの読み込みに適したコンテンツを生成する方法です。 Webpack は現在、フロントエンド リソースのモジュール管理およびパッケージ化ツールとして最も人気があります。依存関係とルールに従って、運用環境の展開と一貫性のあるフロントエンド リソースに多くの緩いモジュールをパッケージ化できます。オンデマンドでロードされるモジュールをコードで分離し、実際に必要なときに非同期でロードすることもできます
Webpack はコンテンツが豊富で乱雑なので、初心者には向きません。この記事では、webpack の重要な概念を例の形で紹介し、webpack の使用方法に焦点を当てます
webpack はモジュール パッケージャーです。
【特徴】
Webpackには以下の機能があります
コード分割
Webpackにはモジュールの依存関係を整理する方法が同期と非同期の2つあります。非同期依存関係は、新しいブロックを形成するための分割ポイントとして機能します。依存関係ツリーを最適化した後、各非同期ブロックはファイルとしてパッケージ化されます。
Loader
Webpack自体はネイティブJavaScriptモジュールしか扱えませんが、ローダーコンバーターは様々なタイプのリソースをJavaScriptモジュールに変換できます。このようにして、あらゆるリソースを Webpack が処理できるモジュールにすることができます。
スマートな解析
Webpack には、モジュール、CommonJS、AMD、または通常の JS ファイルの形式を問わず、ほぼすべてのサードパーティ ライブラリを処理できるスマート パーサーがあります。依存関係をロードする場合でも、動的表現 require("./templates/" + name + ".jade") が許可されます。
プラグインシステム
Webpackには機能豊富なプラグインシステムもあります。ほとんどのコンテンツ機能はこのプラグイン システムに基づいて実行され、さまざまなニーズを満たすためにオープン ソースの Webpack プラグインを開発して使用することもできます。
すぐに実行
Webpackは非同期I/Oとマルチレベルキャッシュを使用して実行効率を向上させ、これによりWebpackは信じられないほど高速でインクリメンタルにコンパイルできます
【インストール】
npmでWebpackをインストールします
$ npm install webpack
よくある問題は、webpack をインストールした後、webpack コマンドが使用できないことです
これは、ローカル インストールのみが実行され、グローバル インストールが存在しないためです。グローバル インストール用の次のコードを入力すると、実行できます
$ npm install webpack -g
最初に静的ページindex.htmlとJSエントリファイルentry.jsを作成します
<!-- index.html --> <html> <head> <meta charset="utf-8"> </head> <body> <script src="bundle.js?1.1.11"></script> </body> </html>
// entry.jsdocument.write('It works.')
次にentry.jsをコンパイルしてbundle.jsにパッケージ化します:
$ webpack entry.js bundle.js
パッケージ化プロセスは次のようになります。ログを表示します:
Hash: f47511e706e3de8f2417 Version: webpack 2.6.1Time: 47ms Asset Size Chunks Chunk Names bundle.js 2.66 kB 0 [emitted] main [0] ./entry.js 27 bytes {0} [built]
ブラウザを使用して index.html
を開くと、It works.
が表示されます。 index.html
将会看到 It works.
接下来添加一个模块 module.js
并修改入口 entry.js
:
// module.jsmodule.exports = 'It works from module.js.'
// entry.jsdocument.write('It works.') document.write(require('./module.js')) // 添加模块
重新打包 webpack entry.js bundle.js
后刷新页面看到变化 It works.It works from module.js.
Hash: 09733456f2c5b24a4845 Version: webpack 2.6.1Time: 61ms Asset Size Chunks Chunk Names bundle.js 2.83 kB 0 [emitted] main [0] ./module.js 43 bytes {0} [built] [1] ./entry.js 75 bytes {0} [built]
Webpack会分析入口文件,解析包含依赖关系的各个文件。这些文件(模块)都打包到 bundle.js 。Webpack 会给每个模块分配一个唯一的 id 并通过这个 id 索引和访问模块。在页面启动时,会先执行 entry.js 中的代码,其它模块会在运行 require
的时候再执行
Webpack 本身只能处理 JavaScript 模块,如果要处理其他类型的文件,就需要使用 loader 进行转换。
Loader 可以理解为是模块和资源的转换器,它本身是一个函数,接受源文件作为参数,返回转换的结果。详细信息移步至此
接上面的例子,我们要在页面中引入一个CSS文件style.css,要使用require("!style-loader!css-loader!./style.css?1.1.11")代码,代码读取顺序从右向左,表示首页将 style.css 也看成是一个模块,先加载style.css,然后用 css-loader
来读取它,再用 style-loader
module.js
を追加し、エントリを変更しますentry.js code>:
/* style.css */body { background: yellow; }
require("style-loader!css-loader!./style.css?1.1.11") document.write('It works.') document.write(require('./module.js'))
webpackentry.jsbundle.js
を再パッケージし、ページを更新して変更を確認します It works.It works module.js から。
npm install css-loader style-loader🎜🎜 Webpack はエントリ ファイルを分析し、依存関係を含む各ファイルを解析します。これらのファイル (モジュール) は、bundle.js にバンドルされます。 Webpack は各モジュールに一意の ID を割り当て、この ID を通じてモジュールにインデックスを付け、アクセスします。ページが開始されると、entry.js のコードが最初に実行され、
require
の実行時に他のモジュールが実行されます🎜🎜🎜🎜Loader🎜🎜 必要に応じて、Webpack 自体は JavaScript モジュールのみを処理できます。他のタイプのファイルを処理するには、ローダーを使用して変換する必要があります。 🎜🎜 ローダーはモジュールとリソースのコンバーターとして理解でき、それ自体はソースファイルをパラメータとして受け取り、変換結果を返す関数です。詳細な情報はここにあります🎜🎜 上記の例に引き続き、CSS ファイル style.css をページに導入し、require("!style-loader!css-loader!./style.css?1.1.11") を使用する必要があります。コード。コードの読み取り順序は右から左です。これは、ホームページが style.css をモジュールとして認識し、次に css-loader
を使用してそれを読み取ってから使用することを意味します。 style-loader ページに挿入します 🎜🎜$ webpack entry.js bundle.js --module-bind 'css=style-loader!css-loader'🎜🎜entry.js を変更します: 🎜🎜
{ "name": "project", "version": "1.0.0", "devDependencies": {"css-loader": "^0.28.4","style-loader": "^0.18.2","webpack": "^2.6.1" } }🎜🎜 ローダーをインストールします: 🎜🎜
var webpack = require('webpack'); module.exports = { entry: './entry.js', //入口文件 output: { path: __dirname,//出口路径filename: 'bundle.js'//出口名称 }, module: { rules: [ {test: /\.css$/,use: [ 'style-loader', 'css-loader' ]} ] } }🎜
重新编译打包,刷新页面,就可以看到黄色的页面背景了
如果每次 require
CSS 文件的时候都要写 loader 前缀,是一件很繁琐的事情。我们可以根据模块类型(扩展名)来自动绑定需要的 loader。
将 entry.js 中的 require("!style-loader!css-loader!./style.css?1.1.11")
修改为 require("./style.css?1.1.11")
,然后执行
$ webpack entry.js bundle.js --module-bind 'css=style-loader!css-loader'
显然,这两种使用 loader 的方式,效果是一样的
Webpack 在执行的时候,除了在命令行传入参数,还可以通过指定的配置文件来执行。默认情况下,会搜索当前目录的 webpack.config.js
文件,这个文件是一个 node.js 模块,返回一个 json 格式的配置信息对象,或者通过 --config
选项来指定配置文件。
继续我们的案例,在根目录创建 package.json
来添加 webpack 需要的依赖:
{ "name": "project", "version": "1.0.0", "devDependencies": {"css-loader": "^0.28.4","style-loader": "^0.18.2","webpack": "^2.6.1" } }
别忘了运行 npm install
。然后创建一个配置文件 webpack.config.js
,在下面的配置中,对一个单独的module对象定义了rules属性,里面包含两个必须属性:test和use。相当于告诉webpack compiler,碰到「在require()/import语句中被解析为'.css'的路径」时,在把它们添加并打包之前,要先使用css-loader后使用style-loader去转换
var webpack = require('webpack'); module.exports = { entry: './entry.js', //入口文件 output: { path: __dirname,//出口路径filename: 'bundle.js'//出口名称 }, module: { rules: [ {test: /\.css$/,use: [ 'style-loader', 'css-loader' ]} ] } }
同时简化 entry.js
中的 style.css
加载方式:
require('./style.css');
最后运行 webpack
,可以看到 webpack 通过配置文件执行的结果和上一节通过命令行 webpack entry.js bundle.js --module-bind 'css=style!css'
执行的结果是一样的
如果配置文件并不叫做默认的webpack.config.js,而是其他的名称,如test.js,则需要设置如下命令进行打包
webpack --config test.js
插件可以完成更多 loader 不能完成的功能。插件的使用一般是在 webpack 的配置信息 plugins
选项中指定。Webpack 本身内置了一些常用的插件,还可以通过 npm 安装第三方插件。详细信息移步至此
想要使用一个插件,只需要require()它,然后把它添加到plugins数组中。内置插件则不需要require,直接使用即可
接下来,我们利用一个最简单的 BannerPlugin
内置插件来实践插件的配置和运行,这个插件的作用是给输出的文件头部添加注释信息。
修改 webpack.config.js
,添加 plugins
:
var webpack = require('webpack'); module.exports = { entry: './entry.js', //入口文件 output: { path: __dirname,//出口路径filename: 'bundle.js'//出口名称 }, module: { rules: [ {test: /\.css$/,use: [ 'style-loader', 'css-loader' ]} ] }, plugins: [new webpack.BannerPlugin('This file is created by xiaohuochai') ] }
然后运行 webpack
,打开 bundle.js
,可以看到文件头部出现了我们指定的注释信息:
/*! This file is created by xiaohuochai *//******/ (function(modules) { // webpackBootstrap/******/ // The module cache/******/ var installedModules = {};// 后面代码省略
当项目逐渐变大,webpack 的编译时间会变长,可以通过参数让编译的输出内容带有进度和颜色
$ webpack --progress --colors
如果不想每次修改模块后都重新编译,那么可以启动监听模式。开启监听模式后,没有变化的模块会在编译后缓存到内存中,而不会每次都被重新编译,所以监听模式的整体速度是很快的
$ webpack --progress --colors --watch
比如,执行以上命令后,修改'style.css'的body的背景颜色为红色,不用重新编译,刷新页面后,页面即发生改变
当然,使用 webpack-dev-server
开发服务是一个更好的选择。它将在 localhost:8080 启动一个 express 静态资源 web 服务器,并且会以监听模式自动运行 webpack,在浏览器打开 http://localhost:8080/ 或 http://localhost:8080/webpack-dev-server/ 可以浏览项目中的页面和编译后的资源输出,并且通过一个 socket.io 服务实时监听它们的变化并自动刷新页面
# 安装 $ npm install webpack-dev-server -g # 运行 $ webpack-dev-server --progress --colors
比如,执行以上命令后,修改'style.css'的body的背景颜色为蓝色,不用重新编译,也不用刷新页面,页面即发生改变
以上がwebpack -- モジュールパッケージャーの詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。