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 传入的参数是一个数组
/******/ ([
/* 0 */
/***/ function(module, exports, __webpack_require__) {
/* __webpack_require__等同于require，参数直接去传入该模块在modules列表中的索引值*/
var text = __webpack_require__(1);
console.log(text);
/***/ },
/* 1 */
/***/ function(module, exports) {
module.exports = "hello world!";
/***/ }
/******/ ]);
创建 index.css
div {
width: 100px;
height: 100px;
background-color: red;
}
在 index.js 中添加，注意引用 loader 时，现在不支持缩写可能回报的异常
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"));
执行打包
