webpackの初期化から使用まで
今回は webpack の初期化から使用まで、webpack の初期化から使用までの注意点についてお届けします。以下は実践的なケースですので見てみましょう。
nodeをインストールした後、html5などの新しいディレクトリを作成します。 cmdで現在のフォルダーに切り替えます。
npm init -y
このコマンドはデフォルトの package.json を作成します。これには、初期インストールを実行できるプロジェクトのいくつかの構成パラメータが含まれています。詳細パラメータ: https://docs.npmjs.com/files/package.json。
yパラメータが不要な場合は、コマンドボックスでさまざまなパラメータを設定しますが、必要ないと思います。
2. webpack をインストールします
npm install webpack --save-dev
webpack を現在のディレクトリにインストールします。 npm install webpack -g は webpack をグローバルにインストールできますが、一部のモジュールが見つからないというエラーが発生しやすいため、現在のディレクトリにインストールすることをお勧めします。
3. ディレクトリ構造
webpackは、さまざまなリソースをロードしてパッケージ化するモジュールです。したがって、最初に次のようなディレクトリ構造を作成します:
アプリには開発中の js ファイル、1 つのコンポーネント、1 つのエントリが含まれています。 Build は、パッケージ化されたファイルを保存するために使用されます。 webpack.config.js 名前が示すように、Webpack を設定するために使用されます。 package.jsonは言うまでもありません。
component.js
export default function () {
var element = document.createElement('h1');
element.innerHTML = 'Hello world';
return element;
}component.jsは、コンテンツを含むh1要素を出力します。エクスポートのデフォルトは ES6 構文であり、デフォルトの出力を指定することを意味します。インポート時に中括弧を含める必要はありません。
index.js
import component from './component'; document.body.appendChild(component());
index.jsの機能は、コンポーネントモジュールを参照し、ページ上にh1要素を出力することです。ただし、現在、index.html ファイルがないため、これを完了するにはプラグインが必要です。
npm install html-webpack-plugin --save-dev
html-webpack-plugin は HTML を生成し、開発ディレクトリにインストールするために使用されます。
4. webpack 設定ファイルを設定します
webpack.config.js ファイルを通じて webpack に開始方法を指示する必要があります。構成ファイルには、少なくとも 1 つのエントリと 1 つの出力が必要です。複数のページには複数の入り口が必要です。ノード
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const PATHS = {
app: path.join(__dirname, 'app'),
build: path.join(__dirname, 'build'),
};
module.exports = {
entry: {
app: PATHS.app,
},
output: {
path: PATHS.build,
filename: '[name].js',
},
plugins: [
new HtmlWebpackPlugin({
title: 'Webpack demo',
}),
],
};のパス モジュールは、この設定ファイルを初めて見たときは少し混乱しました。これは主にエクスポートであり、入口、出力、プラグインの 3 つの部分に分かれています。エントリはアプリ フォルダーを指します。デフォルトでは、「index.js」を含むファイルがエントリとして使用されます。出力はビルド アドレスとファイル名を指定します。ここで [name] はプレースホルダーを表し、webpack によって提供される変数とみなすことができます。これについては後で見ていきます。 HtmlWebpackPlugin はデフォルトの HTML ファイルを生成します。
5. パッケージング
上記の準備が完了すると、webpack に直接入力して実行できるようになります。
この出力には、ハッシュ (パッケージの値は毎回異なります)、バージョン、および時間 (時間がかかります) が含まれます。および出力ファイル情報。この時点で、ビルド フォルダーを開き、追加の app.js と Index.html ファイルを見つけます。 cmdでnpm run buildを実行すると同じ結果が得られます
hellowordが表示されます。もう一度ファイルの内容を見てください
index.html:
{
"name": "Html5",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "webpack"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"html-webpack-plugin": "^2.28.0",
"webpack": "^2.2.1"
}
}app.jsがデフォルトで参照されています。 
6. 分析
app.js<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Webpack demo</title> </head> <body> <script type="text/javascript" src="app.js"></script></body> </html>
/******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/ // Check if module is in cache
/******/ if(installedModules[moduleId])
/******/ return installedModules[moduleId].exports;
/******/ // Create a new module (and put it into the cache)
/******/ var module = installedModules[moduleId] = {
/******/ i: moduleId,
/******/ l: false,
/******/ exports: {}
/******/ };
/******/ // Execute the module function
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/ // Flag the module as loaded
/******/ module.l = true;
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/ // expose the modules object (__webpack_modules__)
/******/ __webpack_require__.m = modules;
/******/ // expose the module cache
/******/ __webpack_require__.c = installedModules;
/******/ // identity function for calling harmony imports with the correct context
/******/ __webpack_require__.i = function(value) { return value; };
/******/ // define getter function for harmony exports
/******/ __webpack_require__.d = function(exports, name, getter) {
/******/ if(!__webpack_require__.o(exports, name)) {
/******/ Object.defineProperty(exports, name, {
/******/ configurable: false,
/******/ enumerable: true,
/******/ get: getter
/******/ });
/******/ }
/******/ };
/******/ // getDefaultExport function for compatibility with non-harmony modules
/******/ __webpack_require__.n = function(module) {
/******/ var getter = module && module.__esModule ?
/******/ function getDefault() { return module['default']; } :
/******/ function getModuleExports() { return module; };
/******/ __webpack_require__.d(getter, 'a', getter);
/******/ return getter;
/******/ };
/******/ // Object.prototype.hasOwnProperty.call
/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
/******/ // __webpack_public_path__
/******/ __webpack_require__.p = "";
/******/ // Load entry module and return exports
/******/ return __webpack_require__(__webpack_require__.s = 1);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
/* harmony default export */ __webpack_exports__["a"] = function () {
var element = document.createElement('h1');
element.innerHTML = 'Hello world';
return element;
};
/***/ }),
/* 1 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__component__ = __webpack_require__(0);
document.body.appendChild(__webpack_require__.i(__WEBPACK_IMPORTED_MODULE_0__component__["a" /* default */])());
/***/ })
/******/ ]);(function(module) {
})([(function (){}), function() {}])コードをコピーします
コードは次のとおりです:modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); call を通じてモジュールを呼び出す主な機能は、パラメーター。return __webpack_require__(__webpack_require__.s = 1);
var module = installedModules[moduleId] = {
i: moduleId,
l: false,
exports: {}
};模块1中加载了模块0，
var __WEBPACK_IMPORTED_MODULE_0__component__ = __webpack_require__(0);
__WEBPACK_IMPORTED_MODULE_0__component__ 返回的是这个模块0的exports部分。而之前Component.js的默认方法定义成了
__webpack_exports__["a"] = function () {
var element = document.createElement('h1');
element.innerHTML = 'Hello world';
return element;
}所以再模块1的定义通过"a“来获取这个方法：
复制代码 代码如下:
document.body.appendChild(__webpack_require__.i(__WEBPACK_IMPORTED_MODULE_0__component__["a" /* default */])());
这样就完整了，但这里使用了__webpack_require__.i 将原值返回。
/******/ // identity function for calling harmony imports with the correct context
/******/ __webpack_require__.i = function(value) { return value; };不太明白这个i函数有什么作用。这个注释也不太明白，路过的大神希望可以指点下。
小结：
webpack通过一个立即执行的匿名函数将各个开发模块作为参数初始化，每个js文件(module)对应一个编号，每个js中export的方法或者对象有各自指定的关键字。通过这种方式将所有的模块和接口方法管理起来。然后先加载最后的一个模块(应该是引用别的模块的模块)，这样进而去触发别的模块的加载，使整个js运行起来。到这基本了解了webpack的功能和部分原理，但略显复杂，且没有感受到有多大的好处。继续探索。
相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
以上がwebpackの初期化から使用までの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7697
15
1640
14
1393
52
1287
25
1229
29
パデュー大学による、時間をかける価値のある拡散モデルのチュートリアル
Apr 07, 2024 am 09:01 AM
拡散はより良いものを模倣するだけでなく、「創造」することもできます。拡散モデル（DiffusionModel）は、画像生成モデルである。 AI 分野でよく知られている GAN や VAE などのアルゴリズムと比較すると、拡散モデルは異なるアプローチを採用しており、その主な考え方は、最初に画像にノイズを追加し、その後徐々にノイズを除去するプロセスです。ノイズを除去して元の画像を復元する方法は、アルゴリズムの中核部分です。最後のアルゴリズムは、ランダムなノイズを含む画像から画像を生成できます。近年、生成 AI の驚異的な成長により、テキストから画像への生成、ビデオ生成など、多くのエキサイティングなアプリケーションが可能になりました。これらの生成ツールの背後にある基本原理は、以前の方法の制限を克服する特別なサンプリング メカニズムである拡散の概念です。
ワンクリックでPPTを生成！キミ: まずは「PPT出稼ぎ労働者」を普及させましょう
Aug 01, 2024 pm 03:28 PM
キミ: たった 1 文の PPT がわずか 10 秒で完成します。 PPTはとても面倒です！会議を開催するには PPT が必要であり、週次報告書を作成するには PPT が必要であり、投資を勧誘するには PPT を提示する必要があり、不正行為を告発するには PPT を送信する必要があります。大学は、PPT 専攻を勉強するようなものです。授業中に PPT を見て、授業後に PPT を行います。おそらく、デニス オースティンが 37 年前に PPT を発明したとき、PPT がこれほど普及する日が来るとは予想していなかったでしょう。 PPT 作成の大変な経験を話すと涙が出ます。 「20 ページを超える PPT を作成するのに 3 か月かかり、何十回も修正しました。PPT を見ると吐きそうになりました。」 「ピーク時には 1 日に 5 枚の PPT を作成し、息をすることさえありました。」 PPTでした。」 即席の会議をするなら、そうすべきです
CVPR 2024 のすべての賞が発表されました!オフラインでのカンファレンスには1万人近くが参加し、Googleの中国人研究者が最優秀論文賞を受賞した
Jun 20, 2024 pm 05:43 PM
北京時間6月20日早朝、シアトルで開催されている最高の国際コンピュータビジョンカンファレンス「CVPR2024」が、最優秀論文やその他の賞を正式に発表した。今年は、最優秀論文 2 件と学生優秀論文 2 件を含む合計 10 件の論文が賞を受賞しました。また、最優秀論文ノミネートも 2 件、学生優秀論文ノミネートも 4 件ありました。コンピュータービジョン (CV) 分野のトップカンファレンスは CVPR で、毎年多数の研究機関や大学が集まります。統計によると、今年は合計 11,532 件の論文が投稿され、2,719 件が採択され、採択率は 23.6% でした。ジョージア工科大学による CVPR2024 データの統計分析によると、研究テーマの観点から最も論文数が多いのは画像とビデオの合成と生成です (Imageandvideosyn
ベアメタルから 700 億のパラメータを備えた大規模モデルまで、チュートリアルとすぐに使えるスクリプトがここにあります
Jul 24, 2024 pm 08:13 PM
LLM が大量のデータを使用して大規模なコンピューター クラスターでトレーニングされていることはわかっています。このサイトでは、LLM トレーニング プロセスを支援および改善するために使用される多くの方法とテクノロジが紹介されています。今日、私たちが共有したいのは、基礎となるテクノロジーを深く掘り下げ、オペレーティング システムさえ持たない大量の「ベア メタル」を LLM のトレーニング用のコンピューター クラスターに変える方法を紹介する記事です。この記事は、機械がどのように考えるかを理解することで一般的な知能の実現に努めている AI スタートアップ企業 Imbue によるものです。もちろん、オペレーティング システムを持たない大量の「ベア メタル」を LLM をトレーニングするためのコンピューター クラスターに変換することは、探索と試行錯誤に満ちた簡単なプロセスではありませんが、Imbue は最終的に 700 億のパラメータを備えた LLM のトレーニングに成功しました。プロセスが蓄積する
PyCharm Community Edition インストール ガイド: すべての手順をすばやくマスターする
Jan 27, 2024 am 09:10 AM
PyCharm コミュニティ版のクイック スタート: 詳細なインストール チュートリアル 完全な分析 はじめに: PyCharm は、開発者が Python コードをより効率的に作成できるようにする包括的なツール セットを提供する強力な Python 統合開発環境 (IDE) です。この記事では、PyCharm Community Edition のインストール方法を詳しく紹介し、初心者がすぐに使い始めるのに役立つ具体的なコード例を示します。ステップ 1: PyCharm Community Edition をダウンロードしてインストールする PyCharm を使用するには、まず公式 Web サイトからダウンロードする必要があります
AIの活用 | AIが一人暮らしの女の子の生活ビデオブログを作成、3日間で数万件の「いいね！」を獲得
Aug 07, 2024 pm 10:53 PM
Machine Power Report 編集者: Yang Wen 大型モデルや AIGC に代表される人工知能の波は、私たちの生活や働き方を静かに変えていますが、ほとんどの人はまだその使い方を知りません。そこで、直感的で興味深く、簡潔な人工知能のユースケースを通じてAIの活用方法を詳しく紹介し、皆様の思考を刺激するコラム「AI in Use」を立ち上げました。また、読者が革新的な実践的な使用例を提出することも歓迎します。ビデオリンク: https://mp.weixin.qq.com/s/2hX_i7li3RqdE4u016yGhQ 最近、Xiaohongshu で一人暮らしの女の子の生活 vlog が人気になりました。イラスト風のアニメーションといくつかの癒しの言葉を組み合わせれば、数日で簡単に習得できます。
C言語学習を始めるためのプログラミングソフト5選
Feb 19, 2024 pm 04:51 PM
C言語は広く使われているプログラミング言語であり、コンピュータプログラミングを志す人にとって必ず学ばなければならない基本的な言語の一つです。ただし、初心者にとって、特に関連する学習ツールや教材が不足しているため、新しいプログラミング言語を学習するのは難しい場合があります。この記事では、C言語初心者がすぐに始められるプログラミングソフトを5つ紹介します。最初のプログラミング ソフトウェアは Code::Blocks でした。 Code::Blocks は、無料のオープンソース統合開発環境 (IDE) です。
技術初心者必読：C言語とPythonの難易度分析
Mar 22, 2024 am 10:21 AM
タイトル: 技術初心者必読: 具体的なコード例を必要とする C 言語と Python の難易度分析 今日のデジタル時代において、プログラミング技術はますます重要な能力となっています。ソフトウェア開発、データ分析、人工知能などの分野で働きたい場合でも、単に興味があってプログラミングを学びたい場合でも、適切なプログラミング言語を選択することが最初のステップです。数あるプログラミング言語の中でも、C言語とPythonは広く使われているプログラミング言語であり、それぞれに独自の特徴があります。この記事ではC言語とPythonの難易度を分析します。
