今回は 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 サイトの他の関連記事を参照してください。