webpack系列二:webpack介绍,安装
webpack系列三:webpack如何集成第三方js库
webpack系列四:webpack多页面支持,公共组件单独打包
webpack系列五:webpack装入器模块加载器
webpack系列六:前端项目模板-webpack +杯实现自动构建部署
基于webpack搭建纯静态页面型前端工程解决方案模板,最终形态源码见github: https://github.com/ifengkou/webpack-template
本篇主要介绍如何集成常用的js库,以阿瓦隆和jquery为例,同理可扩展到其他js库。更高级的功能见后续文章。更高级的功能见后续文章
阿瓦隆是国内的一个轻量级MVVM js框架,只是以此为例并不仅限于它
由于项目用到了阿瓦隆这个MVVM框架,webpack是兼容多种类型的加载器(AMD, CMD),平常用的阿瓦隆。js是自带加载器,用webpack打包时阿瓦隆,只能选用阿瓦隆的垫片无加载器版本,而阿瓦隆目前只有1.4有垫片的版本,且不能通过npm安装,所以只好到github下载垫片版本的阿瓦隆。其中avalon1.4有3个版本,可以根据项目需要下载相应的垫片版本到项目中:
<李>阿瓦隆。js支持IE6 +和现代浏览器李
<李> avalon.modern。js合适的问世于+和HTML5标准浏览器李
<李> avalon.mobile。js支持移动设备(增加了触摸事件,指针,事件,fastclick)
首先得安装上npm,再其次安装webpack
npm安装webpack - g
新建项目,项目的目录结构说明
．
├──包。json #项目配置
├──src #源码目录
│├──pageA。html #入口文件
│├──pageB。html #入口文件b
│├──css/# css资源
│├──img/#图片资源
│├──js # js& jsx资源
││├──pageA。js #一页面入口
││├──pageB。js # b页面入口
││├──lib/#没有存放在npm的第三方库或者下载存放到本地的基础库,如jQuery, Zepto,阿瓦隆
│├──路径映射。json #手动配置某些模块的路径,可以加快webpack的编译速度
├──webpack.config。js # webpack配置入口
之前
新建包。json文件,复制以下内容执行npm安装
{
“名称”:“webpack-template”,
“版本”:“1.0.0”,
“描述”:“webpack-template”
"脚本":{
“测试”:“echo \”的错误:没有测试指定\”,,退出1”
},
“作者”:“sloong”,
“许可证”:“麻省理工学院”,
" devDependencies ": {
:“css-loader ^ 0.21.0”,
:“file-loader ^ 0.8.5”,
:“style-loader ^ 0.13.0”,
:“url-loader ^ 0.5.7”,
:“webpack ^ 1.13.1”,
:“webpack-dev-server ^ 1.14.1”
}
}
之前
1。下载的avalon.shim。js放到src/js/lib下(同理jquery, zepto)
2。在src目录下增加pathmap.json,手动配置某些模块的路径,可以加快webpack的编译速度
{
“阿瓦隆”:“js/lib/avalon.shim.js”
}
备注:其他依赖js模块同理,例如:阿瓦隆+ jquery(或者zepto等等)
{
“jquery”:“js/lib/jquery-1.12.4.js”,
“阿瓦隆”:“js/lib/avalon.shim.js”
}
3。配置webpack.config.js
var webpack=要求(“webpack”);
var=路径要求(“路径”);
var路径映射=要求('/src/pathmap.json。');
var srcDir=path.resolve (process.cwd (),“src”);
var nodeModPath=路径。解决(__dirname '/node_modules。');
模块。出口={
条目:“。/src/js/index.js ",//入口js,可为数组
输出:{
路径:路径。加入(__dirname " dist”),
文件名:“bundle.js”
},
模块:{
加载器:(
{测试:/\。css/美元,装载机:“style-loader ! css-loader '}
]
},
解决:{
扩展:[. js, ", " . css "],
根:[srcDir, nodeModPath],
别名:路径映射,
publicPath:“/?
}
}
之前
4。新增指数。html,引用了dist/包。js (webpack会解析入口文件index.js,将依赖项全部打包到bundle.js中)
& lt; !DOCTYPE html>
& lt; html>
& lt; head>
& lt;元charset=皍tf - 8”比;
& lt; title>测试avalon
