摘要:是一个和差不多同时代的产物,但是它只支持基于,对于来说只能兴叹了。找一个自己顺手的就好,顺便一提,我现在主要使用辅助。
说到自动化构建,你想到了什么?基于AMD的requirejs?还是基于commoJS的browserify?他们都在各自的领域或者说时代发挥了很重要的作用。
但是时代的变迁,webpack成了现在的佼佼者,我们不知道什么时候wepback也会被取代,但是现在我们必须要掌握。
我不担心我学完webpack新东西来了就没用了,相反的我很期待也很高兴有新的东西来取代webpack,因为如果能取代,必然是更好的东西。如果是更好的,那又为什么要拒绝呢?活在当下,认真学习。
webpack和requirejs browserify一样,都是一款打包工具,那为什么要选这个?我们进行一个对比
1. requirejs很老的产物了,它兴起的时候web模块化的标准都还没有完善。那个时候出了一款基于AMD的打包工具,
不得不说对前端的发展起到了至关重要的作用,如果它可以功成身退了。
是一个和webpack差不多同时代的产物,但是它只支持基于commonJS,对于AMD来说只能兴叹了。
并且它只支持打包js,如果你对这两个缺点不那么在意,那么就是它了。
支持AMD和commonJS,以模块化为起点,我们不仅可以用它打包js,也可以打包css,
包括图片。webpack把任何一个文件都看成一个模块,因此你准备好要迎接模块化的挑战了吗?
IDEA、webstrom、sublime、atom 都是很不错的编辑工具,idea大而全,webstrom是idea的简化版、sublime轻量但不失稳重、atom新兴但不失典雅,东西不分上下,重在自己喜欢。找一个自己顺手的就好,顺便一提,我现在主要使用IDEA、辅助atom。因为我是一个java党啊,少不了IDEA,atom的界面是我最喜欢的。
2. 开始建项目写配置a.新建项目 mkdir webpack-study && cd webpack-study
b.初始化环境 npm init -y
c.安装工具(如果你没安装taobao源,把cnpm换成npm) npm install --save-dev webpack webpack-dev-server
说明:webpack是核心文件、wepback-dev-server是类http-server的web启动工具,建议安装一下这个server
d.新建配置文件 (名字一定不能换) touch webpack.config.js
配置webpack
module. exports ={ entry:"./index.js", output:{ path:__dirname+"/dist", filename:"bundle.js" } }
说明:
模块化module.export
入口文件:entry 有几个页面就有几个entry 如果是单页面(spa),一个entry就够了
输出 output,path是输出路径,__dirname是nodejs的全局变量,表示当前目录, filename,打包后的文件名
vim index.js
document.write("Hello world");
touch style.css
body{ background-color:pink; }3.新建一个html
touch index.html
写下以下内容
hello webpack
说明:
模块化module.export
入口文件:entry 有几个页面就有几个entry 如果是单页面(spa),一个entry就够了
输出 output,path是输出路径,__dirname是nodejs的全局变量,表示当前目录, filename,打包后的文件名
vim index.js document.write("Hello world");
2. 新建一个csstouch style.css
body{ background-color:pink; }3.新建一个html
touch index.html
写下以下内容
4.webpack的重头戏hello webpack
那就是loaders,wepback的一大特色就是可以将一些浏览器不能原生支持的文件通过loaders编译成浏览器可以支持的文件
a.安装loaders
npm install style-loader css-loader
b.打开webpack.config.js
添加模块
module:{ loaders:[ { test:/.css$/, loaders:["style-loader","css-loader"] } ] }
说明:
模块下定义大的loaders去loader需要的东西,它是一个数组,意味着它可以定义多个
一个对象就是一个loader,test用正则匹配文件后缀
loaders指定采用哪个loader,注意它是从右往左执行,所以这里先执行css-loader
css-loader处理css的一些url,包括相对的绝对的之类的东西
style-loader 是将css文件采用js动态写入html页面
c.使用css
打开index.js (因为我们这里没有用babel,所以就用es5来写)
require("./style.css");
我们现在可以使用webpack-dev-server这个东西了
如果你己经全局安装了(cnpm install -g webpack-dev-server),直接命令webpack-dev-server就可以开起来了,当然你也可以在package.json文件里面添加script,文件如下
{ "name": "webpack-study", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "start":"webpack-dev-server --progress", "build":"webpack --progress", "test": "echo "Error: no test specified" && exit 1" }, "keywords": [], "author": "", "license": "ISC", "devDependencies": { "css-loader": "^0.23.1", "style-loader": "^0.13.1", "webpack": "^1.13.0", "webpack-dev-server": "^1.14.1" } }
这里我们就可以使用npm run build来编译,使用npm run start来开启服务器
➜ webpack-study git:(master) ✗ npm run build > webpack-study@1.0.0 build /Users/xiaomo/workspace/webpack-study > webpack --progress Hash: 11ffef2911f2436a3948 Version: webpack 1.13.0 Time: 64ms Asset Size Chunks Chunk Names bundle.js 1.42 kB 0 [emitted] main [0] ./index.js 30 bytes {0} [built] ➜ webpack-study git:(master) ✗ npm run start > webpack-study@1.0.0 start /Users/xiaomo/workspace/webpack-study > webpack-dev-server --progcess http://localhost:8080/webpack-dev-server/ webpack result is served from / content is served from /Users/xiaomo/workspace/webpack-study Hash: 11ffef2911f2436a3948 Version: webpack 1.13.0 Time: 80ms Asset Size Chunks Chunk Names bundle.js 1.42 kB 0 [emitted] main chunk {0} bundle.js (main) 30 bytes [rendered] [0] ./index.js 30 bytes {0} [built] webpack: bundle is now VALID.
b.然后访问 http://locahost:8080 就可以看到效果了
五、动态效果展示和总结 1. 总共有5个文件webpack.config.ks、index.js、index.html、style.css、package.json,编译好要使用的只有index.html和dist/bundle.js两个文件
2. gif动画会展示一下5个文件的内容
3. 演示一下效果
如果觉得图小可以点击下面链接查看大图
webpack的简单使用
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/79697.html
摘要:版本目前最新的版本是,而我也是在此基础上进行学习和开发的。能够对图片进行一些处理。目前我还没有达到那种程度,所以一步一步来。简化了文件的创建,以便为您的包提供服务。的对象的配置对象。的作用是来匹配相应的文件。 关于WMOS 好吧,作为第一个系列第一篇的内容估计没多少人会看,所以大概会写的比较烂,还请看的人见谅。至于关于WMOS是什么,在这篇文章里不是十分重要,就先卖个关子,以后(大概吧...
摘要:延伸阅读学习与实践资料索引与前端工程化实践前端每周清单半年盘点之篇前端每周清单半年盘点之与篇前端每周清单半年盘点之篇 前端每周清单专注前端领域内容,以对外文资料的搜集为主,帮助开发者了解一周前端热点;分为新闻热点、开发教程、工程实践、深度阅读、开源项目、巅峰人生等栏目。欢迎关注【前端之巅】微信公众号(ID:frontshow),及时获取前端每周清单;本文则是对于半年来发布的前端每周清单...
摘要:基本环境搭建就不展开讲了一插件篇自动补全前缀官方是这样说的,也就是说它是一个自动检测兼容性给各个浏览器加个内核前缀的插件。 上一篇博客讲解了webpack环境的基本,这一篇讲解一些更深入的内容和开发技巧。基本环境搭建就不展开讲了showImg(http://static.xiaomo.info/images/webpack.png); 一、插件篇 1. 自动补全css3前缀 autop...
阅读 2670·2023-04-25 17:58
阅读 2948·2021-11-15 11:38
阅读 2361·2021-11-02 14:48
阅读 1170·2021-08-25 09:40
阅读 1804·2019-08-30 15:53
阅读 1074·2019-08-30 15:52
阅读 1012·2019-08-30 13:55
阅读 2423·2019-08-29 15:21