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. linux安装apue.3e

    (1)下载源代码,可以去官网下载:http://apuebook.com/code3e.html (2)解压缩源代码文件:tar -zxvf src.3e.tar.gz (3) 安装静态链接库:sud ...

  2. boost multi index

    Boost.MultiIndex makes it possible to define containers that support an arbitrary number of interfac ...

  3. POJ 2443 Set Operation (按位压缩)

    Description You are given N sets, the i-th set (represent by S(i)) have C(i) element (Here "set ...

  4. hdu 6085 Rikka with Candies (set计数)

    Problem Description As we know, Rikka is poor at math. Yuta is worrying about this situation, so he ...

  5. linux下svn安装、配置及钩子

    一.安装 直接运行命令用YUM安装: yum install subversion -y   二.创建svn版本库目录 mkdir -p /var/svn/svnrepos   三.创建版本库 生成文 ...

  6. [CSP-S模拟测试63]题解

    A.Median 这题的数据生成方式并没有什么规律,所以可以认为是随机数据. 维护一个桶,表示当前K长区间里的值域情况. 并且用变量记录中位数值域上的左侧有多少个数,当区间调整时一并调整桶和这个变量即 ...

  7. windows 配置msys2环境

    msys2是一个在windows下模拟类unix的环境,之所以叫环境,是用为他提供了部分unix shell类似的功能,这个环境使你像在unix上使用shell一样.看到msys2你可能想到是不是还有 ...

  8. volatile在嵌入式系统中的用法

    今天参加一家公司的嵌入式C语言笔试,其中有道主观题谈到在嵌入式系统中volatile变量的用法.平时学习C语言没怎么用到,只用到过static和extern的变量,很惭愧没答上来.嵌入式C语言笔试经常 ...

  9. innobackupex2.4选项参考

    该innobackupex2.4选项参考¶ 此页面记录了innobackupex的所有命令行选项. 选项 --apply-log BACKUP-DIR通过应用xtrabackup_logfile位于同 ...

  10. 安装node --- 与升级

    1.安装node流程,请参照菜鸟教程的安装教程   http://www.runoob.com/nodejs/nodejs-install-setup.html 2.这里说一下踩的坑, 问题一.Win ...