注意事项
1.预热知识:前端模块化、commonJS最好提前了解。commonJS语法最好熟悉。
2.commonJS中,module表示当前模块,module.exports(或者exports)代表外部引用包时,实际所引用的对象。
步骤
1.安装webpack:cnpm install webpack -g。
2.使用node命令行定位到需要开发的目录下,使用cnpm init初始化目录。
3.在某个路径下书写模块(一系列js文件)。
4.配置webpack配置文件webpack.config.js(类似gulp的gulpfile.js配置文件),指定入口文件,输出文件以及输出路径等。
5.在node命令行下直接webpack打包(依赖于配置文件),最终生成一个js文件。
6.在HTML中引用这个js文件即可实现之前的功能。

第4步中webpack配置文件的写法:
单入口文件

   var path = require('path');

   module.exports = {
  entry:{
    ab:'./component/ab.js', //入口文件,引用其他模块的文件
  },
  output:{
    filename:'bundle.js', //输出文件
    path:path.resolve(__dirname,'dist'), //指定输出路径
  },
}

多入口文件

 var path = require('path');
  module.exports = {
  entry:{
    ab:'./component/ab.js',
    cd:'./component/cd.js'
  },
  output:{
    filename:'[name].js', //这里的name代表entry里的对象名字,表示占位
    path:path.resolve(__dirname,'dist'),
  },
}

推荐入门教程:

该篇笔记太过简陋,推荐入门Webpack教程:从这里开始入门Webpack

入门学习webpack笔记的更多相关文章

  1. Elasticsearch入门学习重点笔记

    原文:Elasticsearch入门学习重点笔记 必记知识点 Elasticsearch可以接近实时的搜索和存储大量数据.Elasticsearch是一个近实时的搜索平台.这意味着当你导入一个文档并把 ...

  2. 【零基础入门学习Python笔记013】元祖:戴上了枷锁的列表

    元组:戴上了枷锁的列表 因为和列表是近亲关系.所以元祖和列表在实际使用上是很相似的. 本节主要通过讨论元素和列表究竟有什么不同学习元祖. 元组是不可改变元素的.插入.删除或者排序都不能够.列表能够随意 ...

  3. SpringMVC入门学习案例笔记

    一.数据库环境用mysql,数据库建表语句如下: /* SQLyog v10.2 MySQL - 5.1.72-community : Database - mybatis ************* ...

  4. 【零基础入门学习Python笔记012】一个打了激素的数组3

    列表的一些经常使用操作符 比較操作符 逻辑操作符 连接操作符 反复操作符 成员关系操作符 +表示两个连接.*表示复制. list中"+"两边的类型必须一致. 演示样例: water ...

  5. Webpack笔记(一)——从这里入门Webpack

    准备了挺久,一直想要好好深入了解一下Webpack,之前一直嫌弃Webpack麻烦,偏向于Parcel这种零配置的模块打包工具一些,但是实际上还是Webpack比较靠谱,并且Webpack功能更加强大 ...

  6. Hadoop入门学习笔记---part4

    紧接着<Hadoop入门学习笔记---part3>中的继续了解如何用java在程序中操作HDFS. 众所周知,对文件的操作无非是创建,查看,下载,删除.下面我们就开始应用java程序进行操 ...

  7. Hadoop入门学习笔记---part3

    2015年元旦,好好学习,天天向上.良好的开端是成功的一半,任何学习都不能中断,只有坚持才会出结果.继续学习Hadoop.冰冻三尺,非一日之寒! 经过Hadoop的伪分布集群环境的搭建,基本对Hado ...

  8. PyQt4入门学习笔记(三)

    # PyQt4入门学习笔记(三) PyQt4内的布局 布局方式是我们控制我们的GUI页面内各个控件的排放位置的.我们可以通过两种基本方式来控制: 1.绝对位置 2.layout类 绝对位置 这种方式要 ...

  9. PyQt4入门学习笔记(一)

    PyQt4入门学习笔记(一) 一直没有找到什么好的pyqt4的教程,偶然在google上搜到一篇不错的入门文档,翻译过来,留以后再复习. 原始链接如下: http://zetcode.com/gui/ ...

随机推荐

  1. Wordpress 忘记密码怎么办?

    最近一段时间很忙,很久没更新自己博客了,结果忘记了密码? 这里提供两种方法解决. 1.  点击忘记密码,会根据你的邮箱发送一封密码重置邮件,如果没配制邮件或是空间没开启支持,那就有点悲剧了,可以用第二 ...

  2. 大型网站技术学习-3. 容器Docker与kubernetes

    大型网站技术基石篇-容器Docker与kubernetes   Docker和Kubernetes的关系就如Xen与OpenStack. Docker是一种容器技术,和Hypervisor(KVM/X ...

  3. golang基础---Slice切片

    切片Slice在go语言中是单独的类型(指向底层的数组),不同于python(对可迭代对象操作的工具),注意区分数组和slice的区别 定义一个空slice,格式var s []int,这种既没有长度 ...

  4. 【httpwatch】httpwatch对测试的应用

    HttpWatch是一款网页数据分析工具,是浏览器插件,集成在IE浏览器的工具栏中.主要可以用来帮忙我们查看及分析HTTP请求的:Cookie.请求参数.请求头信息.响应头信息.响应状态.响应正文等内 ...

  5. angular 与 layer 集成过程

    layer 的提示框和弹层确实也好用,在使用angular的前提下,使用layer遇到诸多麻烦,记录下来. 在类型是1页面层,主要问题在遮罩方面,造成无法编辑. 开始:引入layer 样式,angul ...

  6. 项目开发-->高级功能汇总

    祭奠曾经逝去的青春…… 1.高级功能汇总-->Memcached之ASP.NET实现 2.高级功能汇总-->HubbleDotNet软件安装

  7. .netcore2.0 发布CentOS7

    1.一般在windows pc上使用vscode 开发好.netcore 程序如果需要发布到其他平台需要注意一些事情 首先需要明白2个概念:FDD(Framework-dependent deploy ...

  8. 域名解析成功后,怎样访问服务器上Eclipse中的Web工程

    右击工程选择Export-->选择Web文件夹下的WAR file-->Destination下选择文件存放的地址-->Finish就可以获得WAR文件了然后将WAR文件放到tomc ...

  9. 关于使用flying-saucer-pdf,实现xhtml2pdf

    @author Guoguo 2013.11.24 关于flying-saucer-pdf 是一个XML/CSS渲染器,flying-saucer-pdf工具以XML标准文件作为输入,CSS进行排版. ...

  10. Spring课程 Spring入门篇 6-2 ProxyFactoryBean及相关内容(上)

    1 解析 1.1 类的方式实现各种通知需要实现的接口 1.2 创建Spring aop代理的优点及方法 1.3 代理控制切入点和通知的顺序的代码实现(具体完全实现,见代码2.1) 1.4 代理方式选择 ...