Hello world
文件目錄
hello
--- hello.js
--- index.js
--- index.html
hello.js
module.exports = "hello world!";
index.js
echo -e var "hello = require(\"hello\");\nconsole.log(hello);" > index.js
var text = require("./hello");
console.log(text);
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script src="./bundle.js"></script>
</body>
</html>
打包
webpack ./index.js bundle.js
將index.js作為項目的入口文件進行構建替废，并將結果輸出到bundle.js
bundle.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] = {
/******/ exports: {},
/******/ id: moduleId,
/******/ loaded: false
/******/ };
/******/ // Execute the module function
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/ // Flag the module as loaded
/******/ module.loaded = 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;
/******/ // __webpack_public_path__
/******/ __webpack_require__.p = "";
/******/ // Load entry module and return exports
/******/ return __webpack_require__(0);
/******/ })
/************************************************************************/
/*********/ // webpackBootstrap 傳入的參數(shù)是一個數(shù)組
/******/ ([
/* 0 */
/***/ function(module, exports, __webpack_require__) {
/* __webpack_require__等同于require箍铭，參數(shù)直接去傳入該模塊在modules列表中的索引值*/
var text = __webpack_require__(1);
console.log(text);
/***/ },
/* 1 */
/***/ function(module, exports) {
module.exports = "hello world!";
/***/ }
/******/ ]);
創(chuàng)建 index.css
div {
width: 100px;
height: 100px;
background-color: red;
}
在 index.js 中添加，注意引用 loader 時椎镣，現(xiàn)在不支持縮寫可能回報的異常
ERROR in ./index.js
Module not found: Error: Can't resolve 'style' in '/home/grandkai/Workspace/hello'
BREAKING CHANGE: It's no longer allowed to omit the '-loader' suffix when using loaders.
You need to specify 'style-loader' instead of 'style',
see https://webpack.js.org/guides/migrating/#automatic-loader-module-name-extension-removed
@ ./index.js 2:0-39
var hello = require("./hello");
require("style-loader!css-loader!./index.css");
console.log(hello);
document.body.appendChild(document.createElement("div"));
執(zhí)行打包
