webpack打包avalon＋oniui+jquery - 司徒正美(2)_H5之家 - 中国HTML5教程资源分享第一站

好了，我们需要一个页面看一下效果。oniui目录下，建立一个index.html

<!DOCTYPE html> <html> <head> <title>TODO supply a title</title> <meta charset="UTF-8"> <meta content="width=device-width, initial-scale=1.0"> <script src="dist/bundle.js"></script> <style> body{ padding:2em; } </style> </head> <body ms-controller="test"> <h1>{{aaa}}</h1> <div ms-widget="accordion,$,$opts"></div> </body> </html>

然后打开你的页面就行看到效果了（我是使用netBeans直接运行，大家也可以试一下webpack-dev-server）

我们再看一下如何结合jquery一起使用，jquery我们还是使用兼容IE6的版本,可以到这里下回来，放到dev/jquery目录下！

我们继续修改webpack.config.js

var webpack = require("webpack"); var path = require("path"); module.exports = { entry: './dev/index', //我们开发时的入口文件 output: {path: path.join(__dirname, "dist"), filename: "bundle.js"}, //页面引用的文件 module: { loaders: [ {test: /\.css$/, loader: 'style-loader!css-loader'} ], preLoaders: [ {test: /\.js$/, loader: "amdcss-loader"} ] }, resolve: { extensions: ['.js', "", ".css"], alias: { jquery: "./jquery/jquery.js", avalon: './avalon/avalon.shim', //在正常情况下我们以CommonJS风格引用avalon,以require('avalon') "../avalon": './avalon/avalon.shim'//由于oniui都以是../avalon来引用avalon的，需要在这里进行别名 } } }

然后修改dev/index.js

var avalon = require("avalon") require("./accordion/avalon.accordion") var $ = require("jquery") avalon.define({ $id: "test", aaa: "Hello Avalon!", $opts:{ data: [{ 'title': '标题1', 'content': '正文1

fasdfsdaf

' }, { 'title': '标题2', 'content': '正文2' }], accordionClass: "oni-accordion-customClass", initIndex: 1, width: "500", onBeforeSwitch: function() { avalon.log(this); avalon.log(arguments); avalon.log("onBeforeSwitch callback"); }, onSwitch: function() { avalon.log("onSwitch callback"); }, multiple: true } }) $(function(){ $("

这是jQuery生成的

").appendTo("body") })

重新运行webpack命令，jquery就打包进去！

不过，我其实不希望大家将jquery与avalon都打包进去的，因为这两个库比较常用，几乎每个页面都有，建立放到CDN中，用script独立引入。详见《Webpack 性能优化（一）（使用别名做重定向）》一文。

至此，本文完毕。我是希望avalon社区能使用更强大的工具进行打包，而不是用requriejs之流了。