以下有标注的地方需要新增,其他可以根据需要调整版本,例如可以使用最新版的vue,修改完成后 运行 并确保其正常安装。
BUI-Weex提供的脚手架工程对webpack的优化包含如下方面:
- 自动根据 src/entry 遍历入口文件;
- 支持使用本地工程的图片资源(bui-image);
- 支持使用字体图标(bui-icon);
- 支持使用sass进行样式编写;
var fs = require('fs');
var webpack = require('webpack');
var glob = require("glob");
var copy = require('copy-webpack-plugin');
var bannerPlugin = new webpack.BannerPlugin(
'// { "framework": "Vue" }\n',
{raw: true}
)
// 文件拷贝插件,将图片和字体拷贝到dist目录
var copyPlugin = new copy([
{from: './src/image', to: "./image"},
{from: './node_modules/bui-weex/src/font', to: "./font"}
])
function getEntries () {
var entryFiles = glob.sync('./src/entry/**', { 'nodir': true})
var entries = {};
for (var i = 0; i < entryFiles.length; i++) {
var filename = filePath.split('entry/')[1];
filename = filename.substr(0, filename.lastIndexOf('.'));
entries[filename] = filePath;
}
return entries;
}
// 生成webpack配置
function getBaseConfig() {
return {
entry: getEntries(),
output: {
path: 'dist',
},
module: {
loaders: [
{
test: /\.js$/,
loader: 'babel',
}, {
test: /\.vue(\?[^?]+)?$/,
}, {
test: /\.scss$/,
loader: 'style!css!sass'
}
]
},
vue: {},
plugins: [bannerPlugin, copyPlugin]
}
}
//*.web.js
var webConfig = getBaseConfig();
webConfig.output.filename = '[name].web.js';
webConfig.module.loaders[1].loaders.push('vue');
//*.weex.js
var weexConfig = getBaseConfig();
weexConfig.output.filename = '[name].weex.js';
weexConfig.module.loaders[1].loaders.push('weex');
对于工程结构,BUI-weex 是有一定要求的,大致上和原生的 Weex工程保持一致。 具体请参看: