webpack超初级教学
我是跟着这个学的http://www.jianshu.com/p/42e1...,这个文有些东西是webpack1.0的东西,我在我的超初级教程进行了部分更改,有什么错误希望大家指出。
首先在全局进行安装
npm install -g webpack
安装到项目目录
npm install --save-dev webpack
初始化一个package.json文件,可以在其中写入项目依赖模块,以及自定义脚本任务。
npm init
根据教程给的例子一共创建两个文件夹
app文件夹---存放一个main.js作为入口文件,主要调用其他的js模块,其他js均作为模块存在
模块化写法一般为module exports=function(){}用来暴露函数 也可以当做一个对象进行暴露,模块化引入可以用require来将模块引入,需要实例化执行函数 puclic文件夹---存放index.html作为网页显示,继续在控制台执行webpack命令:
webpack ./app/main.js(入口文件) ./public/bundle.js(打包出来的文件)
现在打开public文件夹会发现多一个bundle.js index.html引入bundle.js就会执行你在app文件夹下的js文件命令了
以上为webpack低级用法
利用webpack配置文件进行文件打包操作以及写入插件和加载器。
创建文件:webpack.config.js 前端工作者一般会用config.js进行配置,比如最近的项目需要针对不同的危险级别进行颜色配置,我们可以在color.config.js这样写一个对象
colorConfig:{sample:“green”,warn:‘yellow’,‘danger’:‘red’}
当我们引入配置文件后,可以从后台拿到sample,warn,danger这三个字段,我们统一用
colordata表示,这时候我们就可以给我们需要的字段添加style颜色 id.style.fontSize=colorConfig[colordata]
回到webpack,webpack的配置文件则比我写的功能多得多,首先将配置内容进行暴露
module.exports = {entry:__dirname+"/app/main.js", //需要打包时的入口文件output: {path:__dirname+"/public",//输出路径__dirname指的是当前配置文件的绝对路径,是一个node.js的变量filename:"bundle.js"//输出文件名}
}
将写好的配置文件置于根目录下,控制台执行webpack命令,执行后,webpack会直接解读配置文件暴露出来的对象,并
且自动打包在public目录下生成bundle.js
利用npm start命令更便捷的操作webpack,npm主要是针对package.json中写入的命令进行解析执行的,所以我们开始
学习一些简单的命令,写入package.json中
(1)用npm start代替webpack命令
"scripts": {"test": "echo \"Error: no test specified\" && exit 1""start":"webpack"//只需要写入这句就可以啦},
start是一个特殊的命令,如果想用其他代替start,比如npm go那么需要写成npm run go
webpack强大的功能出现!!!
一·Source Maps (资源轮询?)可以让编译后的文件可读性更高。
首先需要注意的是,只要关于webpack操作的都添加到webpack配置文件中,不要把package.json与config搞混
二. webpack server 构建webpack服务器,实时监测你的代码
这是一个插件,所以需要npm来下载到你的module中
命令行执行命令:npm install --save-dev webpack-dev-server
如果运行出错,有两处最有可能出现的错误,其中一个是在package.js中,看看是否忘记增加逗号,另一个错误就是
执行命令是否写错。
下载有些慢,需要等待,这时候我们可以阅读下devServer的api,在配置文件下写入
devServer:{contentBase:"./public",//本地服务器加载的页面所在的目录historyApiFallback:true,//不跳转inline:true//实时刷新}
最后运行下npm start 试试新加入的功能,为什么我的打开浏览器localhost:8080不好用!!!!我们先不管,下一
步先,
我今天知道啦:由于我们是用npm start来执行webpack打包,所以我们需要在package.json里面
将“start”:"webpack"加点料 “start”:“webpack-dev-server --inline”我让我们试一下、、
哈哈 成功了
三·loaders继续
Loaders据说是webpack最牛的功能------=之一。主要功能是将es6,7,或者scss,sass都转成浏览器可以识别的文件
Loaders需要单独安装,并且在配置文件的module关键字下配置。
教程中给了一个转换json的loader
首先控制台下载安装npm install --save-dev json-loader
然后在配置文件的module下添加
loaders:[{test:/\.json$/,loader:"json"}
]
只要点击保存,页面也会随之变化。
下面教程说的是关于react的,我只弄过vue,个人感觉Vue更简单,创建一个Vue脚手架项目只有四个命令
1你得有node
2npm install -g vue-cli
3vue init webpack yourprojectname
4cd yourprojectname
5npm install
6npm run dev
开发起来很简单,个人感觉比react容易的多
略过恶心人的Babel让我们接着看看他的教程,他讲的都是react,我依然推荐vue,哈哈哈。
额,后面讲的东西如果你使用Vue脚手架的话,个人感觉这篇文章学习一下就ok了。
github仓库地址:https://github.com/kindLee-al...
webpack超初级教学相关推荐
- vue-element超初级教学
本次写的项目是关于机器终端管理的,一开始使用的是最基本的bootstrap+jq+html以及一些小插件,后来由于项目有很多重复度很高的地方,而且老大要求扩展度要高,比如头部,左边栏,所以决定和另一名 ...
- linux添加后门方法,超初级的linux后门制作方法
超初级的linux后门制作方法 更新时间:2006年10月24日 00:00:00 作者: 众所周知,Linux的文件权限如: 777:666等,其实只要在相应的文件上加上UID的权限,就可以用到 ...
- AI轻松入门,AI零基础入门,AI初级教学,
2020的下半年已经开启了,大家还记得美剧<疑犯追踪>(Person of Interest)中贯穿全剧的机器宝宝么?从开始的训练学习,进化到可以自我更新.自我维护.自我修复,乃至最终进化 ...
- 小狼的单身情话之HTML网页标签和段落的初级教学
欢迎来到单身情话之小狼版--情话微甜 如果你还是一个人,如果你有喜欢的人,如果你不想夜里孤独相伴,那么,就请你跟着小狼一起走进情话的世界吧!! 本文章适合新手,小白,初次接触HTML网页制作的朋友,如 ...
- 视频教程-【无废话课程】Maya软件初级教学UV拆分基础入门【字幕版】-Maya
[无废话课程]Maya软件初级教学UV拆分基础入门[字幕版] 3D数字互动领域的技术研发.以用户为核心,以市场为导向,提升用户体验,提高数字内容品质,着力打造数字内容国际一流品牌.目前拥有多个自主知识 ...
- 关于自然常数e的来源与应用(超初级,也超恐怖)
http://blog.163.com/hxiangyong@126/blog/static/62955972201062531118902/ 关于自然常数e的来源与应用(超初级,也超恐怖) 2 ...
- Javascript-小游戏2048 超详细教学说明
Javascript-小游戏2048 超详细教学说明 前言 最近在学前端,趁热找几个小游戏练练手. 2048游戏规则不再过多描述,这里主要用到了html,css,JavaScript相关知识. 代码来 ...
- webpack超超初级入门
首先在全局进行安装 npm install -g webpack 安装到项目目录 npm install --save-dev webpack 初始化一个package.json文件,可以在其中写入项 ...
- 怎么监控一个接口的传输数据_监控安装超详细教学教程,学会又多一门技能
大家好,这里是一涛说电脑,今天给大家讲讲关于监控的一些事.本篇属于长篇技术教学,有精通的朋友请绕路,有不懂或者不精通的朋友请耐心看完或多或少都有些许收获. 交通监控 治安监控 小区监控 说到监控,大家 ...
最新文章
- 磁盘格式化、磁盘挂载、手动增加swap空间
- 《转》八大算法详细讲解
- LeetCode每日一题: 单值二叉树(No.965)
- 公众号质量改进调查问卷
- Spring+mongodb集群集成(吐血教程) 转自:http://blog.csdn.net/qq_16497617/article/details/52817335
- oracle 11g 配置navicate lite Instance Client下载
- android 汽车 源码_汽车级Linux,无需Google即可运行Android等
- java 注解开发 解耦_Java提升七:注解
- 巧用BroadcastReceiver实现开机“自”启动
- 我的Java开发学习之旅------Java经典排序算法之冒泡排序
- vue element 地址联动的使用
- sqlite3驱动文件
- python答题系统设计
- docker容器化部署
- (NO.00001)iOS游戏SpeedBoy Lite成形记(十九)
- 调节音量的各个方法——AudioManager的使用
- FCPX插件:3D照片动画制作器—3D Photo Animator
- 关联式容器---map和set
- 域文件服务器可不可以多个,多个域控服务器的搭建
- [WiFi教程] 轻松教你支持ZTE中兴客户端
热门文章
- 外贸企业邮箱批发,收费企业邮箱与免费企业邮箱区别
- 基于XInput的罗技手柄编程
- python逻辑回归:出现ConvergenceWarning: lbfgs failed to converge (status=1)
- grasps什么意思中文_英语单词grasps怎么读,grasps的音标是什么,grasps是什么意思 - 音标网...
- Altium Designer过孔盖油设置
- HTML5培训课件:CSS3新增属性拿走不谢
- [源码和文档分享]基于C语言的局域网飞鸽传书软件设计与实现
- Cocos2d-x 4.0 安装教程(Windows10 + Visual Studio 2019)
- BRD,MRD,PRD的区别
- NIOS and DDR2