1.新建一个入口js文件,如entry.js,代码如下:

document.write("It works.")

2.然后编译 entry.js 并打包到 bundle.js(会自动生成),在cmd中找到当前entry.js目录下,执行如下命令:

webpack entry.js bundle.js

用浏览器打开 html页面 将会看到 It works.

3.接下来增加一个模块module.js,需要修改入口

document.write('It works.');
document.write(require('./module.js'));//添加模块

4.再次编译entry.js并打包到bundle.js

webpack entry.js bundle.js

Webpack 会分析入口文件,解析包含依赖关系的各个文件。这些文件(模块)都打包到 bundle.js 。

Webpack 会给每个模块分配一个唯一的 id 并通过这个 id 索引和访问模块。

在页面启动时,会先执行 entry.js 中的代码,其它模块会在运行 require 的时候再执行。

webpack学习笔记——打包js的更多相关文章

  1. webpack学习笔记——打包后直接访问页面,图片路径错误

    我说的这种图片路径错误是这样的,运行webpack-dev-server,一切正常,没有错误.当webpack之后,直接打开index页面,报错,图片找不到,找不到的原因是路径错误. 先看我的项目代码 ...

  2. webpack学习笔记一:安装webpack、webpack-dev-server、内存加载js和html文件、loader处理非js文件

    一 .webpack学习环境准备: 1:window系统 2:安装node.js  官方网址 下载好后下一步下一步安装即可 安装步骤略过....... 3:nrm的安装 打开cmd命令控制台 输入:n ...

  3. 【原】webpack学习笔记

    之前在react的项目中有用过webpack,不过没有认真的去研究,这段时间又重新好好的学习一下webpack,发觉 webpack是一个很强大的东西.而且很好用,方便,接下来主要是做一下学习的笔记 ...

  4. 更博不能忘——webpack学习笔记

    webpack是前端构建系统就像grunt和gulp(之前有学习过grunt所以也就大概明白webpack是个什么东西),所以说前端技术大部分还真是相通的,现在觉得当时多看的东西并不白费,虽然长时间不 ...

  5. webpack学习笔记(二)-- 初学者常见问题及解决方法

    这篇文章是webpack学习第二篇,主要罗列了本人在实际操作中遇到的一些问题及其解决方法,仅供参考,欢迎提出不同意见. 注:本文假设读者已有webpack方面相关知识,故文中涉及到的专有名词不做另外解 ...

  6. Webpack 学习笔记总结

    Webpack安装 Linux系统默认已经安装了node&npm,但版本比较低,而且没法升级,可以重新下载Node然后通过软链接替换系统自带的node和npm; ln -s /path_to/ ...

  7. Webpack学习笔记九 webpack优化总结

    webpack 优化笔记 webpack4 自带的优化包括 swingTree(摇摆树)和作用域提升 swingTree 比如入口文件 index.js引入通用方法 util, 里面有 10个方法, ...

  8. webpack学习笔记一(入门)

    webpack集成了模块加载和打包等功能 ,这两年在前端领域越来越受欢迎.平时一般是用requirejs.seajs作为模块加载用,用grunt/gulp作为前端构建.webpack作为模块化加载兼容 ...

  9. Webpack学习笔记(二)

    市面上已经存在的模块管理和打包工具并不适合大型的项目,尤其单页面 Web 应用程序.最紧迫的原因是如何在一个大规模的代码库中,维护各种模块资源的分割和存放,维护它们之间的依赖关系,并且无缝的将它们整合 ...

随机推荐

  1. spring boot 连接mysql mongodb with jpa

    https://github.com/bigben0123/gs-accessing-data-mysql-mongo-jpa

  2. 洛谷P1041 传染病控制

    解:搜索...... 我们可以每次选择分支少的搜索,或者说,贪心的搜索当前更优的决策. 每一层把能剪的点搞出来,按照度数/SIZ排序,然后依次搜索.加个最优化剪枝就完事了. #include < ...

  3. struts2 对EL的改变

    Struts2对EL的改变 1.Struts2中使用EL的问题: 前提: 我们应该知道,如果我们没有往值栈(根)中放入数据的话,那么我们的动作类默认是在值栈的栈顶 2.关于EL问题的分析: 分析:   ...

  4. 苹果电脑python3安装pillow模块

    我刚开始在苹果电脑自带的python 中安装了pillow模块,导致在后期我想在python3中安装pilow模块的时候 pip3 install pillow 但是总会提示错误说电脑中已经存在pil ...

  5. (二叉树 BFS) leetcode103. Binary Tree Zigzag Level Order Traversal

    Given a binary tree, return the zigzag level order traversal of its nodes' values. (ie, from left to ...

  6. 42套JavaScript深度解析教学视频!合集

    本文首发于:风云社区SCOEE(社区旨在普惠软件.图片.音乐.视频.素材.文档等互联网资源.为大众提供多样化的服务,以及主要涵盖学术科学.电脑技术.文化人文.体育健身等领域的知识和信息,获得用户的支持 ...

  7. vue init 解决办法

    /由于windows系统的某方面问题,vue脚手架安装可能会出现第一证书丢失 // 报错:vue-cli · Failed to download repo vuejs-templates/webpa ...

  8. VirtualBox使用入门

    VirtualBox使用入门 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 能玩虚拟机的人多少是懂点运维的,因此我就不跟大家介绍啥事虚拟化了.关于虚拟化产品大家用的应该也都大同小异 ...

  9. Linux下查看线程数的几种方法汇总

    Linux下查看线程数的几种方法汇总 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.Linux下查看某个进程的线程数量 pstree命令以树状图显示进程间的关系(display ...

  10. synchronized 和lock的区别

    synchronized 是什么时候释放? 1.获取锁的线程执行完代码2.线程执行出现异常 synchronized 的缺陷? 1.Lock类可以主动释放锁.2.synchronized 是被动. R ...