webpack最基本的用法

来源：互联网发布：java商城项目需要多久编辑：程序博客网时间：2024/06/08 15:33

webpack

安装

webpack是所以Node.js开发的工具,可通过npm安装,首先要保证node已经安装完毕,可以去node官网下载, 然后通过npm下载webpack

npm install webpack -g

我们只需要webpack构建项目, 项目上线后是不需要依赖webpack的所以我们在项目文件夹下安装时候可以安装在dev-dependencies中, 即:

npm install webpack --save-dev

在这里我们采用第一种安装方法

编写代码

接下来我们使用webpack构建一个简单的hello word应用, 包括两个js模块

1 生成文本”Hello word”的hello模块(hello.js)

module.exports = "Hello word";

2 打印文本的index模块(index.js)

var text = require('./hello');console.log(text);

3 页面内容(index.html)

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title></head><body>    <script type="text/javascript" src="bundle.js"></script></body></html>

引入的bundle.js并不存在,他就是我们使用webpack构建出来的js文件

现在我们的目录结构应该是这样的:

index.js

hello.js

index.html

构建

此时在项目文件夹下使用命令行工具(没有安装git可以按住shift右键,可以直接打开控制台)输入命令

webpack ./index bundle.js

这个命令会告诉webpack 将index.js作为项目入口文件进行构建, 并将结果输出为bundle.js, 然后在项目文件夹下就可以看到bundle.js文件了, 现在在浏览器中打开index.html文件就会在控制台看到输入Hello word了

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] = {/******/            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, exports) {module.exports = "hello word!";/***/ }),/* 1 *//***/ (function(module, exports, __webpack_require__) {var text = __webpack_require__(0);console.log(text);/***/ })/******/ ]);

0 0