webpack最基本的用法

webpack最基本的用法

大家好,又见面了,我是全栈君。

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)
<!DOCTYPE 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); /***/ }) /******/ ]);

转载于:https://www.cnblogs.com/mr-yuan/p/6608142.html

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/108603.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • SOAP协议的深度解析

    SOAP协议的深度解析笔记上传:1.soap与http的区别:HTTP只负责把数据传送过去,不会管这个数据是XML、HTML、图片、文本文件或者别的什么。( HTTP就是邮局的协议,他们规定了你的信封要怎么写,要贴多少邮票等。。。。)而SOAP协议则定义了怎么把一个对象变成XML文本,在远程如何调用等  (SOAP就是你们之间交流的协议,负责把你所需要表达的意思写在信纸上,同时也负责让对方能够看得懂你的信。)2.s…

  • 计算机启动显示安装程序正在启动服务,电脑停在“安装程序正在启动服务”解决办法…[通俗易懂]

    计算机启动显示安装程序正在启动服务,电脑停在“安装程序正在启动服务”解决办法…[通俗易懂]电脑卡在“安装程序正在启动服务”解决办法朋友你好我是小飞这是2019年我们第315次见面。早上一小伙伴的电脑出问题了,送过来我解决了之后,决定把这些问题和解决步骤总结出来,以便将来有人用得上。问题描述:电脑恢复出厂模式后,重新启动会一直停在“安装程序正在启动服务”。不管你怎么开机重启都不行。这里,提出解决步骤:重新启动,连续按F2,进入BIOS系统,然后按enter回车键,重新启动。(最重要的一步…

  • Ant Design A-table 表格 后端 排序问题

    Ant Design A-table 表格 后端 排序问题

  • pytest fixtures_jig和fixture的区别

    pytest fixtures_jig和fixture的区别fixture的优势Pytest的fixture相对于传统的xUnit的setup/teardown函数做了显著的改进:命名方式灵活,不局限于setup和teardown这几个命名conf

  • STM32看门狗–窗口看门狗

    STM32看门狗–窗口看门狗stm32有两个看门狗,独立看门狗和窗口看门狗,其实两者的功能是类似的,只是喂狗的限制时间不同。 独立看门狗是限制喂狗时间在0-x内,x由你的相关寄存器决定。喂狗的时间不能过晚。窗口看门狗,所以称之为窗口就是因为其喂狗时间是一个有上下限的范围内,你可以通过设定相关寄存器,设定其上限时间和下限时间。喂狗的时间不能过早也不能过晚。图1&n…

  • 通过SOCKS代理渗透整个内网

    通过SOCKS代理渗透整个内网通过SOCKS代理渗透整个内网1.背景经过前期的渗透工作,我们现在已经成功找到了web站点的漏洞,并且获得了一个普通的webshell,现在准备用菜刀去连接它。注意:本次环境在本地搭建,假设现在一无所知,这样更加真实。2.对web服务器提权2.1获取漏洞信息获取到webshell后使用菜刀连接,查看权限是apache,系统是redhat6.5。上传linux.sh到…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号