WEBPACK开始
这是一个非常简单的例子，通过这个例子你将学习到
1、How to install webpack
2、How to use webpack
3、How to use loaders
4、How to use the development server
使用node安装
$ npm install webpack -g
创建一个entry.js
document.write("It works.");
添加index.html
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script type="text/javascript" src="bundle.js" charset="utf-8"></script>
</body>
</html>
然后
$ webpack ./entry.js bundle.js
它将会编译文件并创建一个bundle.js文件
接下来我们创建第二个文件content.js
module.exports = "It works from content.js.";
更新entry.js
- document.write("It works.");
+ document.write(require("./content.js"));
然后再次编译
$ webpack ./entry.js bundle.js
第一个loader
webpack只能处理JavaScript本身，所以我们需要css-loader来处理css
npm install css-loader style-loader
执行完之后会创建一个node_modules 文件
然后我们创建一个style.css
body {
background: yellow;
}
更新entry.js
+ require("!style!css!./style.css");
document.write(require("./content.js"));
然后编译，刷新浏览器，看背景颜色是否为yellow
一个配置文件webpack.config.js
module.exports = {
entry: "./entry.js",
output: {
path: __dirname,
filename: "bundle.js"
},
module: {
loaders: [
{ test: /\.css$/, loader: "style!css" }
]
}
};
这时候只要运行
webpack
如果项目编译时，可能需要一段时间，这时候可以显示进度条和颜色
webpack --progress --colors
我们不想每次修改后手动编译
webpack --progress --colors --watch
开发服务器
npm install webpack-dev-server -g
然后运行
webpack-dev-server --progress --colors
访问 http://localhost:8080/
WEBPACK开始的更多相关文章
- js学习笔记：webpack基础入门（一）
之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...
- webpack之傻瓜式教程
接触webpack也有挺长一段时间了,公司的项目也是一直用着webpack在打包处理,但前几天在教新人的情况下,遇到了一个问题,那就是:尽管网上的webpack教程满天飞,但是却很难找到一个能让新人快 ...
- 细说前端自动化打包工具--webpack
背景 记得2004年的时候,互联网开发就是做网页,那时也没有前端和后端的区分,有时一个网站就是一些纯静态的html,通过链接组织在一起.用过Dreamweaver的都知道,做网页就像用word编辑文档 ...
- Webstorm+Webpack+echarts构建个性化定制的数据可视化图表&&两个echarts详细教程（柱状图，南丁格尔图）
Webstorm+Webpack+echarts ECharts 特性介绍 ECharts,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(I ...
- 使用webstorm+webpack构建简单入门级“HelloWorld”的应用&&引用jquery来实现alert
使用webstorm+webpack构建简单入门级"HelloWorld"的应用&&构建使用jquery来实现 1.首先你自己把webstorm安装完成. 请参考这 ...
- webpack入门教程之Hello webpack(一)
webpack入门教程系列为官网Tutorials的个人译文,旨在给予想要学习webpack的小伙伴一个另外的途径.如有不当之处,请大家指出. 看完入门教程系列后,你将会学习到如下内容: 1.如何安装 ...
- webpack的使用
1.webpack是什么? 打包前端项目的工具(为项目提高逼格的东西). 2.webpack的基本命令 webpack#最基本的启动webpack命令 webpack-w #提供watch方法,实时进 ...
- Webpack 配置摘要
open-browser-webpack-plugin 自动打开浏览器 html-webpack-plugin 通过 JS 生成 HTML webpack.optimize.UglifyJsPlugi ...
- Vue + Webpack + Vue-loader 系列教程（2）相关配置篇
原文地址:https://lvyongbo.gitbooks.io/vue-loader/content/ 使用预处理器 在 Webpack 中,所有的预处理器需要和一个相应的加载器一同使用.vue- ...
- Vue + Webpack + Vue-loader 系列教程（1）功能介绍篇
原文地址:https://lvyongbo.gitbooks.io/vue-loader/content/ Vue-loader 是什么? vue-loader 是一个加载器,能把如下格式的 Vue ...
随机推荐
- Install Debian note
environment: already install xp,win7 and win8PE, left 87G space to install Debian, this space not fo ...
- [NOIP2011] 聪明的质检员（二分答案）
题目描述 小T 是一名质量监督员,最近负责检验一批矿产的质量.这批矿产共有 n 个矿石,从 1到n 逐一编号,每个矿石都有自己的重量 wi 以及价值vi .检验矿产的流程是: 1 .给定m 个区间[L ...
- 面试题五 数组中出现次数超过一半的数字 时间为O(n)
也就是说 该数字出现的次数比其他所有数字出现次数的和还要多. 因此可以保存两个值,一个数字,一个次数. 遍历时 1.如果数字相同,count++ 2.如果count == 0 count = 1 nu ...
- urllib+BeautifulSoup无登录模式爬取豆瓣电影Top250
对于简单的爬虫任务,尤其对于初学者,urllib+BeautifulSoup足以满足大部分的任务. 1.urllib是Python3自带的库,不需要安装,但是BeautifulSoup却是需要安装的. ...
- javascript 键盘输入过滤，只能输入数字，小数一位且只能输入5
$("#right_div2 input[type='text'][class='textClass'][id^='asd_']").live("keydown" ...
- [转]编译安装libevent，memcache，以及php的memcached扩展
一 安装libevent 1.去官网http://libevent.org/ 下载最新源码,我用的是libevent-2.0.20-stable.tar.gz 2.解压到/usr/src目录 ,执行命 ...
- IIS 7.0 部署MVC
开发的MVC 3.0 项目,在部署服务上还是与需要花一点功夫,这里把遇到的问题罗列出来. 本文主要介绍IIS 7.5中安装配置MVC 3.0的具体办法! 部署必备: Microsoft .net Fr ...
- ubuntu 彻底卸载软件
找到此软件名称,然后sudo apt-get purge ......(点点为为程序名称),purge参数为彻底删除文件,然后sudo apt-get autoremove,sudo apt-get ...
- JAVA源码走读（一） HashMap与ArrayList
HashMap 一.HashMap基本概念: HashMap是基于哈希表的Map接口的实现.此实现提供所有可选的映射操作,并允许使用null值和null键.此类不保证映射的顺序,特别是它不保证该顺序恒 ...
- opencv2.4.9在ubuntu(树莓派)上安装
参考原文:https://my.oschina.net/u/1757926/blog/293976 1. 先从sourceforge上下载OpenCV的源码 http://jaist.dl.sourc ...