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. HTML5: HTML5 语义元素

    ylbtech-HTML5: HTML5 语义元素 1.返回顶部 1. HTML5 语义元素 语义= 意义 语义元素 = 有意义的元素 什么是语义元素? 一个语义元素能够清楚的描述其意义给浏览器和开发 ...

  2. 9、继续matlab数值分析

    1.matlab拉格朗日插值 function yi=Lagrange(x,y,xi) %x为向量,全部的插值节点 %y为向量,插值节点处的函数值 %xi为标量或向量,被估计函数的自变量: %yi为x ...

  3. 深入理解finally关键字,Finally到底是在return前面执行还是在return后面执行

    一:2种finally不会执行的情况 a.在try语句之前就return了 b.try语句中有System.exit();语句 二:finally语句在return执行之后,return返回之前执行 ...

  4. 执行sudo apt-get update报错

    1.在官网源https://mirrors.ustc.edu.cn/repogen/下载对应版本最新的源,比如我是16.04版本的ubuntu,对应下载的是这个 2.下载sources.list完成之 ...

  5. 在JMeter测试计划中如何控制业务比例

    作者:Selingchen 来源:CSDN 原文:https://blog.csdn.net/selingchen/article/details/47844375

  6. spring data jpa 关联设计

    MAP关联实体 // @ElementCollection @OneToMany(cascade = {CascadeType.ALL})// @JoinColumn(name = "the ...

  7. elementUI 的el-pagination 分页功能

    <div class="block1"> <el-pagination @size-change="handleSizeChange" @cu ...

  8. idea部署tomcat项目时，在项目里打断点不能拦截

    以下内容都是基于我自己的项目(如未解决道友们的问题,请别介意) idea部署tomcat项目时,在项目里打断点不能拦截,工作中遇到的问题,记录一下(tomcat6) 当项目的以下内容配置完毕后,启动项 ...

  9. python wave 库 读取 BytesIO 对象的注意事项

    程序中遇到需要使用临时文件时,常使用内存中的 io.BytesIO() 代替实体二进制文件,以避免磁盘IO,同时免去了考虑文件名的麻烦. file = io.BytesIO() file.write( ...

  10. mysql 使用 insert ignore into和unique实现不插入重复数据功能

    执行插入操作,如果数据库中不存在才插入,否则就不插入 首先需要通过unique指定唯一约束字段 然后写sql语句的时候就写  insert ignore into () valuse () 这样就能实 ...