入门学习webpack笔记
注意事项:
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笔记的更多相关文章
- Elasticsearch入门学习重点笔记
原文:Elasticsearch入门学习重点笔记 必记知识点 Elasticsearch可以接近实时的搜索和存储大量数据.Elasticsearch是一个近实时的搜索平台.这意味着当你导入一个文档并把 ...
- 【零基础入门学习Python笔记013】元祖:戴上了枷锁的列表
元组:戴上了枷锁的列表 因为和列表是近亲关系.所以元祖和列表在实际使用上是很相似的. 本节主要通过讨论元素和列表究竟有什么不同学习元祖. 元组是不可改变元素的.插入.删除或者排序都不能够.列表能够随意 ...
- SpringMVC入门学习案例笔记
一.数据库环境用mysql,数据库建表语句如下: /* SQLyog v10.2 MySQL - 5.1.72-community : Database - mybatis ************* ...
- 【零基础入门学习Python笔记012】一个打了激素的数组3
列表的一些经常使用操作符 比較操作符 逻辑操作符 连接操作符 反复操作符 成员关系操作符 +表示两个连接.*表示复制. list中"+"两边的类型必须一致. 演示样例: water ...
- Webpack笔记(一)——从这里入门Webpack
准备了挺久,一直想要好好深入了解一下Webpack,之前一直嫌弃Webpack麻烦,偏向于Parcel这种零配置的模块打包工具一些,但是实际上还是Webpack比较靠谱,并且Webpack功能更加强大 ...
- Hadoop入门学习笔记---part4
紧接着<Hadoop入门学习笔记---part3>中的继续了解如何用java在程序中操作HDFS. 众所周知,对文件的操作无非是创建,查看,下载,删除.下面我们就开始应用java程序进行操 ...
- Hadoop入门学习笔记---part3
2015年元旦,好好学习,天天向上.良好的开端是成功的一半,任何学习都不能中断,只有坚持才会出结果.继续学习Hadoop.冰冻三尺,非一日之寒! 经过Hadoop的伪分布集群环境的搭建,基本对Hado ...
- PyQt4入门学习笔记(三)
# PyQt4入门学习笔记(三) PyQt4内的布局 布局方式是我们控制我们的GUI页面内各个控件的排放位置的.我们可以通过两种基本方式来控制: 1.绝对位置 2.layout类 绝对位置 这种方式要 ...
- PyQt4入门学习笔记(一)
PyQt4入门学习笔记(一) 一直没有找到什么好的pyqt4的教程,偶然在google上搜到一篇不错的入门文档,翻译过来,留以后再复习. 原始链接如下: http://zetcode.com/gui/ ...
随机推荐
- Java中break、continue及标签等跳转语句的使用[上]
java 中跳转语句使用break.continue和标签,各自或组合完成相应的功能. 今天做题时遇到关于标签命名规范,顺便将跳转语句语法都看了一遍,很有收获. 在<Java编程思想>一书 ...
- 架构实战项目心得(六):后台服务nosql数据库mongodb
一.架构介绍 mongodb有几种部署方式,这里采用的是副本集架构(Replica Set). 为了防止单点故障就需要引副本(Replication),当发生硬件故障或者其 ...
- 2017年12月14日 LinQ高级查&&Asp.net WebForm Asp.net MVC
LinQ的高级查询用法 开头:StartsWith()结尾:EndsWith()模糊:Contains() 个数:Count最大值:Max(r => r.price)最小值:Min(r => ...
- poj 1276(多重背包+最接近)
http://www.cnblogs.com/rainydays/archive/2013/03/08/2950258.html http://www.cnblogs.com/ziyi--caolu/ ...
- 如何将一个SpringBoot简便地打成一个war包(转)
为什么要把SpringBoot打成war包 正常情况下SpringBoot项目是以jar包的形式,通过命令行: java -jar demo.jar 来运行的,并且SpringBoot是内嵌Tomca ...
- 模块与包&常用模块
一.模块的使用 模块定义:一系列功能的集合体 分为三大类:1.自定义模块 2.内置模块(比如 time,os,sys) 3.第三方模块 模块的表现形式: 1.使用python编写的py文件 2.已被编 ...
- mongoDB (mongoose、增删改查、聚合、索引、连接、备份与恢复、监控等等)
MongoDB - 简介 官网:https://www.mongodb.com/ MongoDB 是一个基于分布式文件存储的数据库,由 C++ 语言编写,旨在为 WEB 应用提供可扩展的高性能数据存储 ...
- windows sserver 2008远程桌面端口修改
开始->运行->regedit HKEY_LOCAL_MACHINE\System\CurrentControlSet\Control\Terminal Server\WinStation ...
- 06_javassist
[简述] Javassist是一个开源的java字节码操作工具,主要是对已经编译好class文件进行修改和处理,可以直接检查.修改.创建 java类. [javassist实例] package co ...
- Python爬虫教程-14-爬虫使用filecookiejar保存cookie文件(人人网)
Python爬虫教程-14-爬虫使用filecookiejar保存cookie文件(人人网) 上一篇介绍了利用CookieJar访问人人网,本篇将使用filecookiejar将cookie以文件形式 ...