webpack使用之基础篇
说到自动化构建,你想到了什么?基于AMD的requirejs?还是基于commoJS的browserify?他们都在各自的领域或者说时代发挥了很重要的作用。 一、基本简介webpack和requirejs browserify一样,都是一款打包工具,那为什么要选这个?我们进行一个对比 1. requirejs很老的产物了,它兴起的时候web模块化的标准都还没有完善。那个时候出了一款基于AMD的打包工具, 2. browserify是一个和webpack差不多同时代的产物,但是它只支持基于commonJS,对于AMD来说只能兴叹了。 3. webpack支持AMD和commonJS,以模块化为起点,我们不仅可以用它打包js,也可以打包css, 二、环境搭建1. IDE推荐
2. 开始建项目写配置a.新建项目
module. exports ={ entry:'./index.js',output:{ path:__dirname+'/dist',filename:'bundle.js' } } 说明: 三、 写一个小测试1. 新建入口文件并写入文件
2. 新建一个css
body{ background-color:pink; } 3.新建一个html
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>hello webpack</title> <script src="dist/bundle.js"></script> </head> <body> </body> </html> 说明: 三、 写一个小测试1. 新建入口文件并写入文件
2. 新建一个css
body{ background-color:pink; } 3.新建一个html
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>hello webpack</title> <script src="dist/bundle.js"></script> </head> <body> </body> </html> 4.webpack的重头戏那就是loaders,wepback的一大特色就是可以将一些浏览器不能原生支持的文件通过loaders编译成浏览器可以支持的文件 module:{ loaders:[ { test:/.css$/,loaders:['style-loader','css-loader'] } ] } 说明: 四、查看效果我们现在可以使用 { "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" } } 这里我们就可以使用 ? 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个文件
2. gif动画会展示一下5个文件的内容 3. 演示一下效果
(编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |