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)

<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);

/***/ })

/******/ ]);

webpack最基本的用法的更多相关文章

  1. webpack简单原理及用法

    前言 如果你已经对Webpack精通了或者至少一直在工作中使用它,请关闭当前浏览器标签,无视这篇文章. 这篇文章本意是写给我自己看的,作为一篇Cookbook供快速查询和上手用.原因是虽然工作中会涉及 ...

  2. webpack核心模块tapable用法解析

    前不久写了一篇webpack基本原理和AST用法的文章,本来想接着写webpack plugin的原理的,但是发现webpack plugin高度依赖tapable这个库,不清楚tapable而直接去 ...

  3. webpack的三种用法

    1.直接命令行使用. 2.node.js API的使用方式. 3.webpack / webpack--config webpack. dev.config.js //根目录创建 webpack.co ...

  4. webpack中require.context 用法

    1.require.context(directory, useSubdirectories = false, regExp = /^\.\//) Examples: require.context( ...

  5. 细说前端自动化打包工具--webpack

    背景 记得2004年的时候,互联网开发就是做网页,那时也没有前端和后端的区分,有时一个网站就是一些纯静态的html,通过链接组织在一起.用过Dreamweaver的都知道,做网页就像用word编辑文档 ...

  6. webpack+react+antd 单页面应用实例

    React框架已经火了好长一段时间了,再不学就out了! 对React还没有了解的同学可以看看我之前的一篇文章,可以快速简单的认识一下React.React入门最好的实例-TodoList 自己从开始 ...

  7. Webpack教程一

    比较 如果你熟悉原来一系列的构建工具,grunt或者gulp之类的,这里有一篇webpack和他们比较的文章可以读一读. Webpack Compared 安装 先装好node和npm,因为webpa ...

  8. [转] Webpack 入门指迷

    大概算是一份教程吧, 只不过效果肯定不如视频演示之类的好.. Webpack 最近在英文社区上经常看到, 留了心, 但进一步了解是通过下边的视频:视频: How Instagram.com Works ...

  9. webpack学习笔记—webpack安装、基本配置

    文章结构: 什么是webpack? 安装webpack 'webpack基本配置 一.什么是webpack? 在学习react时发现大部分文章都是react和webpack结合使用的,所以在学reac ...

随机推荐

  1. leetcode-165周赛-1277-统计全为1的正方形子矩阵

    题目描述: 自己的提交: class Solution: def countSquares(self, matrix: List[List[int]]) -> int: if not matri ...

  2. php qq第三方登陆

    0.下载QQ登录(QQ互)php版:下载地址:点击打开链接(本文编写时最新版本:V2.1 ) 1.在QQ互联网站注册一个appid,配置网站地址和回调地址. 例:http://yzdd.app1101 ...

  3. 初识sed和gwak

    一.sed编辑器 sed命令的格式如下: sed options script file 选项 -e script        在处理输入时,将script中指定的命令添加到已有的命令中 -f fi ...

  4. JMeter 阶梯式加压测试插件 Concurrency Thread Group

    jmeter阶梯式加压测试:JMeter 阶梯式加压测试插件 Stepping Thread Group 由于Stepping Thread Group插件相对来说过于老旧,已不被官方所推荐. 所以这 ...

  5. Excel表格 函数

    1.四则运算(加.减.乘.除).求和.平均.计数.最值. 2. 逻辑函数 (IF函数.NOT函数.等) 3.时间和日期 ( NOW 返回当前日期和时间.等) 4.数学与三角函数 5.文本 ( LOWE ...

  6. CPU、内存、磁盘三者的关系

    参考:https://blog.csdn.net/weini1111/article/details/70849332 cpu是大脑,计算数据用的. 内存是草稿纸,开着电脑一直都在用里边的数据,如果断 ...

  7. 编译Android系统源码和内核源码

    [日期:2016-01-11] 来源:Linux社区  作者:jiangwei [字体:大 中 小]     把我之前编译Android系统源码和内核源码的过程记录一下,因为这个过程真的是受益匪浅,看 ...

  8. 内核module读取进程页目录

    根据当前CR3寄存器内容,读取对应物理内存中的页目录页,并进行解析 1: void dumpPageDirectoryEntry(u32 entry) 2: { 3: u8 present; 4: u ...

  9. Supervisord rce（CVE-2017-11610）

    POST /RPC2 HTTP/1.1 Host: localhost Accept: */* Accept-Language: en User-Agent: Mozilla/5.0 (compati ...

  10. 3.Jmeter 快速入门教程(三-1) --添加响应断言（即loadrunner中所指的检查点）

    上一节课,我们创建了一个测试场景,并进行了少量vuser的负载测试. 有时候我们执行了测试,但是发现并不是所有事务都执行成功了. 那是因为我们只是发起了测试,但并没有对每次请求测试的返回作校验. 所以 ...