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. Halo（四）

    BeanWrapper 接口 操作属性 package org.springframework.beans; BeanWrapper bw = new BeanWrapperImpl(beanObje ...

  2. tomcat部署项目遇到的问题

    场景:在一台服务器上部署多个Tomcat,每个Tomcat下运行各自的项目 * )启动Tomcat startup.cmd报错: java.lang.Exception: Socket bind fa ...

  3. Vue.config.optionMergeStrategies 用法分析

    举个例子,假设有个对象,他叫objA, 技能是说hello,他喜欢的女生叫小花,但是他是一个花心的人! objA = { name: 'objA ', sayHello_ () { console.l ...

  4. Git命令操作

    安装配置 将其bin目录添加到path ssh -keygen -t rsa -C 自己的邮箱(获取ssh远程连接秘钥) 使用: 进入项目目录 右击进入git bash 执行git init gith ...

  5. cesium左侧列表定位目标

    cesium左侧列表定位目标 功能:根据左侧列表经纬度等信息的值,进行搜索定位. 列表: 1  点击清除按钮可以清空所有input的值 2  点击查找可以定位到位置,如果输入的值不在范围内,会有弹出框 ...

  6. css点击高亮

    .btn-default:active:focus, .btn-default:active:hover { color: #333; background-color:lightseagreen; ...

  7. 【痛定思痛】TCP 三次握手学习

    前言:今天滴滴面试失败,痛定思痛,好好复习面试中最惨淡的计算机网络部分 面试中,面试官问我TCP与UDP最大的区别是什么,答:TCP可靠,UDP不可靠,一个面向有连接,一个面向无连接,一个快一个慢:追 ...

  8. Linux NIO 系列(02) 阻塞式 IO

    目录 一.环境准备 1.1 代码演示 二.Socket 是什么 2.1 socket 套接字 2.2 套接字描述符 2.3 文件描述符和文件指针的区别 三.基本的 SOCKET 接口函数 3.1 so ...

  9. SQL语句的执行顺序和效率

    今天上午在开发的过程中,突然遇到一个问题,需要了解SQL语句的执行顺序才能继续,上网上查了一下相关的资料,现整理如下:一.sql语句的执行步骤: 1)语法分析,分析语句的语法是否符合规范,衡量语句中各 ...

  10. Linux部署web项目

    一.软件1.putty2.WinSCP 二.调试1.linux 下 apache启动.停止.重启命令基本的操作方法:本文假设你的apahce安装目录为/usr/local/apache2,这些方法适合 ...