哈，本人是REACT系開發者，工作中需要不停的折騰webpack，為了順帶學習VUE的開發思想和思路，順理成章的請纓為公司小程序打個框架基礎。前期也去了解了下各個小程序開發框架，大體上是通過轉義的思路來解決小程序和VUE/REACT的模板、邏輯關系，不做展開討論了。只是從本人角度分享通過webpack來構建小程序的開發架構。

通過觀察小程序的原有架構，不難發現其已經是一套比較完善的mvvm架構了(類VUE)，融合了VUE及REACT的一些特點(以VUE為主)，但卻有一些不足，缺失了前端開發人員常用的npm包的引入，動態樣式的編譯等等提升開發效率的工作環境、模式。因此我想如果通過webpack4來為原有架構做一個有益的補充，這樣原生架構不就很完美了嗎？

思路

對等編譯輸出小程序項目的所有文件(嚴格按照小程序需要的文件及目錄結構輸出)。js/wxs通過babel編譯輸出，wxml/json直接輸出，wxss通過stylus編譯輸出(我們使用stylus開發樣式)，順帶使用webpack抽離公共模塊文件common.js，并將runtime運行時抽離作為一個獨立文件。這樣既精簡了代碼，又享用到了webpack為我們帶來的好處。嗯，看上去很簡單嘛，實際上卻是踩了不少的坑！腳上的繭老厚了~~~

webpack module配置

module: { rules: [  {   test: //.(wxml|axml)/, // 為支付寶小程序留了個伏筆，哈哈   use: [    relativeFileLoader(isWechat ? 'wxml' : 'axml'), // 這里使用file-loader簡單封裝了一下    'extract-loader',    'html-loader'   ]  },  {   test: //.(jp(e?)g|png|gif)$/,   use: relativeFileLoader()  },  {   test: //.wxss$/,   include: SRC,   use: relativeFileLoader(),  },  {   test: //.wxs$/,   include: SRC,   exclude: /node_modules/,   use: [    relativeFileLoader(),    {     loader: 'babel-loader',     options: {      babelrc: false,      presets: [       'es2015',        'stage-0'      ]     },    }   ]  },  {   test: //.js$/,   use: {    loader: 'happypack/loader',    options: {     id: 'babel'    }   },   exclude: /node_modules/,  },  {   test: //.styl$/,   include: SRC,   use: [    relativeFileLoader(isWechat ? 'wxss' : 'acss'),    'stylus-loader'   ]  } ]},

熟悉webpack的同學通過上面的moudle配置應該能夠看出資源文件編譯的思路，當然直接這樣配置肯定做不到正確編譯，還有一些坑需要踩

全文件entry

為了對等輸出，我們需要把所有文件整理為entry給webpack處理，這樣的好處是js能夠使用npm包，所有文件都能夠支持熱更新機制(webpack的熱更新響應非常快，gulp的熱更新很難精細控制，當項目足夠大的時候，響應很慢)

function entries(dir) { var jsFiles = {} let _partten = /[//|//][_](/w)+/; let re_common = /(.*)//common/// const accessExts = ['.wxml', '.wxss', '.styl', '.wxs', '.json', '.png', '.jpg', '.jpeg', '.gif'] if (fse.existsSync(dir)) {  globby.sync([`${dir}/**/*`, `!${dir}/js/**/cloudfunctions`, '!node_modules', `!${dir}/dist`]).forEach(function (item) {   if (!re_common.test(item)) {    if (!_partten.test(item)) {     const fileObj = path.parse(item)     const xcxSrc = path.join(dir, 'js')     if (~item.indexOf(xcxSrc)) {      const fileStat = fs.statSync(item)      const relativeFile = item.replace(xcxSrc, '')      let relativeKey = relativeFile.replace(fileObj.ext, '').substring(1)      if (fileObj.ext == '.js') {       jsFiles[relativeKey] = item      }      else {       if (accessExts.indexOf(fileObj.ext) > -1) {        jsFiles['nobuild__' + relativeFile] = item       }      }     }    }   }  }) } return jsFiles}