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)


相关推荐

  • 【转】没什么能够阻挡,你对自由的向往

    【转】没什么能够阻挡,你对自由的向往http://card.weibo.com/article/h5/s#cid=1001593811889019800466&vid=&extparam=&from=&w

  • 阿里笔试题(2017在线编程题)– 数串分组 –Java实现

    阿里笔试题(2017在线编程题)– 数串分组 –Java实现看到有人写了阿里的面试题,心里痒痒,好久没搞过这些了,写着实现一下题目2017年3月阿里在线编程题(实习内推)给定一串数字判断是否存在这三个元素,它们将数字串分为四个子串,其中每个子串的数字之和均相同(该3个元素不纳入计算)要求时间复杂度和空间复杂度均不能超过O(n)实现简单的用Java实现了一下,大家凑乎看,有问题请多多指出–一个半路出家的Java程序员代

  • DHCP协议浅析

    DHCP协议浅析定义:动态主机配置协议,主要在一些大型局域网络环境中,集中管理和分配IP地址,提升地址的使用效率。DHCP协议采用CLIENT-SERVER方式实现,而且DHCP协议是基于UDP层之上的应用,DHCPCLIENT将采用端口号68,DHCPSERVER采用端口号67进行交互。DHCP的三种分配IP机制:自动分配方式:DHCP服务器为主机指定一个永久性的IP地址。客户端一旦第一次成功租用IP过后,后面即可永久性使用次IP地址。 动态分配方式:DHCP服务器为主机指定一个具有时间期限的IP地址…

  • MySQL日期时间戳转换

    MySQL日期时间戳转换 1.MySQL获取当前时间戳MySQL&gt; select UNIX_TIMESTAMP();+——————+| UNIX_TIMESTAMP() |+——————+|       1525739078 |+——————+1 row in setMySQL&gt; SELECT UNIX_TIME…

  • 2021版idea_idea无法配置tomcat

    2021版idea_idea无法配置tomcat最新用Idea写Jsp前期准备IDEA、JDK、Tomcat请先在自己电脑上装好好么~博客图片为主请多看红框框开始1.创建、配置项目1.1创建普通java项目NewProject-【next】1.2添加框架的支持1.3开始配置项目配置projectstructure【F4】或项目右键【OpenModuleSettings】或右上角有个黑蓝色的框框或菜单栏【view】-【OpenModuleSettings】进入1.3.1配置Source在

    2022年10月26日
  • Lucene 3.0.0 的TokenStream与Analyzer

    Lucene 3.0.0 的TokenStream与Analyzer如果你看的Lucene相关的书是很老版本的,比如说2.4或者更早,那么对于这个版本中的Analyzer可能就不那么容易接受了,我也是看的<lucene分析与应用>这本书,比较古老的版本.今天读了一下源代码,大概说说心得,我从SimpleAnalyzer说起.SimpleAnalyzer的作用就是把一段字符串中除了符号和非文字的内容作为分…

发表回复

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

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