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. 使用 v-html 绑定值

    <div id="app03"> <div v-html="message"></div> <!--这里使用v-htm ...

  2. shell 输入输出重定向

    1. 命令列表: command > file 将输出重定向到file command < file 将输入重定向到file command >> file 将输出以追加的方式 ...

  3. vue-cli创建的项目中引入第三方库报错'caller', 'calle', and 'arguments' properties may not be...

    本文链接:https://blog.csdn.net/Sophie_U/article/details/76223978 问题: 在vue的main.js中引入mui.min.js时,报错. 如上,单 ...

  4. SpringBoot搭建基于Apache Shiro+Redis的分布式Session共享功能

    我们在上一遍文档中已经完成了Shiro验证功能.(http://www.cnblogs.com/nbfujx/p/7773789.html),在此基础上我们将完成分布式Session共享功能. Red ...

  5. HTML中多媒体标签技术说明

    在纯文本的HTML页面中加入图片,给原来单调乏味的页面添加生气.HTML语言中利用<IMG>标记插入图片. 1．图片标记<IMG>及其属性 在网站上,网页设计者都使用了大量精心 ...

  6. CSS 提示工具(Tooltip)

    CSS 提示工具(Tooltip) 本文为大家介绍如何使用HTML和CSS来实现提示工具, 提示工具在鼠标移动到制定元素后触发,先看下面示例: 1.基础提示工具代码如下: <!doctye ht ...

  7. python 的装饰器，

    昨天去面试,发现了装饰器还是不太熟悉, 笔试题目是: 随意编写两个对输入参数做加减乘除运算的函数(需要有除法),写完后,用装饰器实现对函数出现除数为0的异常捕获,如果有异常,使用print打印日志. ...

  8. Java异常抛出

    如果要在一段代码中抛出一个已检查的异常,有两个选择: 使用try-catch块处理已检查的异常. 在方法/构造函数声明中用throws子句指定. 语法 throws子句的一般语法是: 1 2 3 &l ...

  9. Java学习第一次总结

    在此之前我需要声明一下,我不载过多的评论知识点的简单与难易程度.写出来只是为了方便使用,现阶段追求的是实在.㈠①自动类型转换由低到高byte.short.char→int→long→flot→doub ...

  10. UML指南系列——用例图

    可以用用例来描述正在开发的系统想要实现的行为,而不必说明这些行为如何实现. 结构良好的用例只表示系统或者子系统的基本行为,而且既不过于笼统也不过于详细.