webpack初试
前言:
知道这完儿,没用过。关于webpack有很多介绍了,就不多说了。放几个链接,方便新手理解。这是给纯没用过的人了解的。这里只是简单介绍一下webpack的基本用法。大多内容都是来自webpack/getting-started,外加一些自己的理解。
安装 webpack:
You need to have node.js installed.
$ npm install webpack -g
eg 1:
新建文件:
entry.js
document.write("It works.");
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>SETUP THE COMPILATION</title>
</head>
<body>
<script type="text/javascript" src="bundle.js"></script>
</body>
</html>
运行:
$ webpack ./entry.js bundle.js
如果成功,会这样:
在编辑器里会自动生成一个bundle.js
在浏览器打开index.html,会显示 It works.
eg 2:
下一步,我们将代码依赖到另一个文件:
添加 content.js
module.exports = "It works from content.js.";
更新 entry.js
document.write(require("./content.js"));
运行 $ webpack ./entry.js bundle.js
浏览器将输出:It works from content.js.
webpack 会分析你的入口文件是否依赖其他文件。如果有,这些文件(模块)同样会打包到 bundle.js中。webpack会给每个模块分配给唯一的ID,通过ID来访问这个模块。
eg 3:
添加CSS样式到我们的应用中。打包CSS。
webpack只能处理JavaScript 本身,所以我们需要 css-loader 去处理css文件,我们还需要用style-loader 将转换后的css加载到dom中。
$npm install css-loader style-loader
Run npm install css-loader style-loader
to install the loaders. (They need to be installed locally, without -g
) This will create anode_modules
folder for you, in which the loaders will live.
看这意思是,要把这个加载的node_modules加载到本地。
接着,创建个style.css文件
body{
background-color: yellow;
font-family: 'Franklin Gothic Medium', 'Arial Narrow';
}
更新我们的 entry.js文件
require("!style!css!./style.css");
document.write(require("./content.js"));
执行
$ webpack ./entry.js bundle.js
再次打开你的index.html:
如果我们不想写过长require,可以这样 在 entry.js里
require(“!style!css!./style.css”);,简化为require(“./style.css”)。
执行:
webpack ./entry.js bundle.js --module-bind 'css=style!css'
“Some environments may require double quotes: –module-bind “css=style!css” “
一些环境下可能需要双引号。
当然,在浏览器中你会看到相同的效果。
eg 4:
添加webpack.config.js.
module.exports = {
entry : "./entry.js",
output:{
path:__dirname,
filename:"bundle.js"
},
module:{
loaders:[
{ test :/\.css$/,loader:"style!css"}
]
}
};
现在,运行:
webpack
webpack 命令将尝试加载目录中的webpack.config.js文件。
以上。
肯定会有理解不到的地方。这只是webpack的基本用法。更多的需要各位道友一同探索了。~~
demo:https://github.com/miloers/webpack_demo
webpack初试的更多相关文章
- react+babel+webpack初试
在上一篇,我们简单学习了webpack学习,现在这里我们简单学习一下react+babel+webpack,进行编译react语法jsx以及结合es6写法. 这里我就简单的直接上demo: packa ...
- 初试webpack打包
第一次接触webpack,学习了如何用webpack打包,记录一下过程. 1.在项目根目录安装webpack $ npm install webpack --save-dev 2.新建一个webpac ...
- 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方法,实时进 ...
随机推荐
- springmvc 文件上传实现(不是服务器的)
1.spring使用了apache-commons下的上传组件,因此,我们需要引用2个jar包 1)apache-commons-fileupload.jar 2 ) apache-commons-i ...
- 美团HD(4)-二级联动效果
DJNavDropView.m #import "DJNavDropView.h" #import "DJCategory.h" #import "D ...
- 3d转换-正方体-Html5Css3-遁地龙卷风
(-1) 写在前面 我用的是chrome49,这个案例是从网上看到的,向这位同行致敬,建议大家在记录自己学习感悟时,向我一样加上笔名,被转载的时候还能留下点东西. 在研究slice-box.js的时候 ...
- web自动化工具-开篇
web自动化工具-开篇 最近几年,前端技术风一样的速度迭代更新,各种框架工具雨后春笋般涌现,作为一个平凡的开发者,也只能在洪流中沉沉浮浮,微不足道,以前前端叫做切图仔.美工,如今改了称号叫前端工程师, ...
- c# socket 编程
转 http://www.cnblogs.com/cailangwei/archive/2011/11/21/2258191.html 基于Socket服务器端实现本例主要是建立多客户端与服务器之 ...
- 如何让两个div在同一行显示?一个float搞定
最近在学习div和css,遇到了一些问题也解决了很多以前以为很难搞定的问题.比如:如何让两个div显示在同一行呢?(不是用table表格,table对SE不太友好)其实,<div> 是一个 ...
- 服务器通过微信公众号Token验证测试的代码(Python版)
我在阿里云租了一个云服务器,然后想把这个作为我的微信公众号的后台,启用微信公众号开发者需要正确的响应微信服务器的Token验证,为此把这个验证的Python代码贴出来,只要在服务器上运行这段代码,注意 ...
- shell脚本: 备份mysql远程数据库并清除一个月之前的数据
hxingxing-backup.sh: date="$(date +"%Y-%m-%d")"mysqldump -u root -h localhost -p ...
- PYTHON文件操作(二)
class file(object) def close(self): # real signature unknown; restored from __doc__ 关闭文件 "" ...
- OpenCV中IplImage图像格式与BYTE图像数据的转换
最近在将Karlsruhe Institute of Technology的Andreas Geiger发表在ACCV2010上的Efficent Large-Scale Stereo Matchin ...