ホームページ > 記事 > ウェブフロントエンド > webpackの初期化から使用まで

webpackの初期化から使用まで

php中世界最好的语言オリジナル: 2018-06-09 11:36:282504ブラウズ

今回は 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>

そしてapp.jsにはさらに多くのコンテンツがあります。全体は匿名関数です。

/******/ (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 */])());

/***/ })
/******/ ]);

appフォルダー内の2つのjsファイルがここでの2つのモジュールになります。関数は__webpack_require__

(function(module) {
})([(function (){}), function() {}])

から始まり、モジュール1から実行されるように指定されています(代入文の戻り値がその値です)。モジュール 1 への呼び出しは、文 __webpack_require__ を通じて実行されます。

コードをコピーします

コードは次のとおりです:

modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);

call を通じてモジュールを呼び出す主な機能は、パラメーター。

return __webpack_require__(__webpack_require__.s = 1);

__webpack_require__ モジュールがロードされるたびに、最初にモジュールキャッシュが検索されます。そうでない場合は、新しいモジュールオブジェクトを作成します。

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の初期化から使用まで

関連記事