以下有标注的地方需要新增,其他可以根据需要调整版本,例如可以使用最新版的vue,修改完成后 运行 并确保其正常安装。

    BUI-Weex提供的脚手架工程对webpack的优化包含如下方面:

    1. 自动根据 src/entry 遍历入口文件;
    2. 支持使用本地工程的图片资源(bui-image);
    3. 支持使用字体图标(bui-icon);
    4. 支持使用sass进行样式编写;
    1. var fs = require('fs');
    2. var webpack = require('webpack');
    3. var glob = require("glob");
    4. var copy = require('copy-webpack-plugin');
    5. var bannerPlugin = new webpack.BannerPlugin(
    6. '// { "framework": "Vue" }\n',
    7. {raw: true}
    8. )
    9. // 文件拷贝插件,将图片和字体拷贝到dist目录
    10. var copyPlugin = new copy([
    11. {from: './src/image', to: "./image"},
    12. {from: './node_modules/bui-weex/src/font', to: "./font"}
    13. ])
    14. function getEntries () {
    15. var entryFiles = glob.sync('./src/entry/**', { 'nodir': true})
    16. var entries = {};
    17. for (var i = 0; i < entryFiles.length; i++) {
    18. var filename = filePath.split('entry/')[1];
    19. filename = filename.substr(0, filename.lastIndexOf('.'));
    20. entries[filename] = filePath;
    21. }
    22. return entries;
    23. }
    24. // 生成webpack配置
    25. function getBaseConfig() {
    26. return {
    27. entry: getEntries(),
    28. output: {
    29. path: 'dist',
    30. },
    31. module: {
    32. loaders: [
    33. {
    34. test: /\.js$/,
    35. loader: 'babel',
    36. }, {
    37. test: /\.vue(\?[^?]+)?$/,
    38. }, {
    39. test: /\.scss$/,
    40. loader: 'style!css!sass'
    41. }
    42. ]
    43. },
    44. vue: {},
    45. plugins: [bannerPlugin, copyPlugin]
    46. }
    47. }
    48. //*.web.js
    49. var webConfig = getBaseConfig();
    50. webConfig.output.filename = '[name].web.js';
    51. webConfig.module.loaders[1].loaders.push('vue');
    52. //*.weex.js
    53. var weexConfig = getBaseConfig();
    54. weexConfig.output.filename = '[name].weex.js';
    55. weexConfig.module.loaders[1].loaders.push('weex');

    对于工程结构,BUI-weex 是有一定要求的,大致上和原生的 Weex工程保持一致。 具体请参看: