用webpack4开发小程序的实现方法

module: {
 rules: [
  {
   test: /\.(wxml|axml)/, // 为支付宝小程序留了个伏笔，哈哈
   use: [
    relativeFileLoader(isWechat "htmlcode">

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
}



上述是entry的生成代码，涵盖了小程序目录结构下的所有需要的文件，并加上了一些特定的标识，以便于后续文件编译输出


非JS文件的输出


在entry方法中我们将wxml，wxss等文件作为entry统统灌给webpack去处理，正常我们使用webpack时是不会把非js文件作为entry输给webpack的。你猜webpack会报错吗，----- 哈哈，报错就讲不下去了，webpack会傻傻的把每个entry文件都当做js来对待，并且正常输出，*.wxml.js，等等，这是什么鬼，我并不需要这样的东东。加个插件来处理一下




compiler.hooks.compilation.tap('wpConcatFile', (compilation, params) => {
 compilation.hooks.beforeChunkAssets.tap('wpConcatFile', () => {
  compilation.chunks = compilation.chunks.filter(function (item) {
   return item.name.indexOf('nobuild__') == -1
  })
 })
 ...
 ...
}



nobuild__是在生成entry代码是给非js文件加上的prefix前缀，在插件中我们排除掉非js，将正常的js文件重新chunk，js文件就能够正常的输出了，那么那些非js文件呢？webpack并不会编译生成它们，中途它们就会被module中的xx-loader处理完,然后被file-loader给甩出去了。


全局变量替换


将全局变量替换为微信小程序的wx，我们通过插件解决




const globalVar = 'wx'
...
...
...
let contentObj = compilation.assets[file]
let code = contentObj.source()
code = code.replace(windowRegExp, that.globalVar);
contentObj = new RawSource(code)

compilation.assets[file] = new ConcatSource(
 contentSource,
 '\n',
 '\/**auto import common&runtime js**\/',
 '\n',
 contentObj,
);




通过上述代码不难看出，我们读取了每个文件的源码，并将全局变量window/global替换为wx，再进行源码重组。


运行时文件引入


我们需要引入runtime.js和common.js文件，runtime运行环境是webpack为每个编译文件插入的用于解析define, require, module等等这些的文件引入方法，为了精简文件，我们将之抽离为runtime.js，common.js为我们抽离出来的公共模块文件。在web/h5下引入这些资源是不是so easy，但你还记得我们是在小程序环境下嘛，并不能通过<script>标签来引入资源文件啊啊啊，你会不会猛拍脑门，一下就慌了(哈哈)。老办法，我们通过插件解决




const lens = []
let posixPath = ''
const matchIt = chunk.name.match(/\//g)
if (matchIt) {
 matchIt.forEach(it => lens.push(this.prePath))
 // posixPath = './'+lens.join('')
 posixPath = lens.join('')
} else {
 posixPath = './'
}
let posixPathFile = posixPath + 'runtime.js'
let contentSource = this.contentSource.replace('~~~~', posixPathFile)
if (chunk.name.indexOf('runtime') > -1) {
 posixPathFile = posixPath + 'common.js'
 if (hasCommon) {
  contentSource = this.contentSource.replace('~~~~', posixPathFile)
 } else {
  contentSource = ''
 }
}



上述代码片段中，posixPath是我们通过一个小的算法来推算资源引入的路径深度变量，输出并重写源文件chunk，这样我们就解决了资源引入的问题


webpack-dev-server


引入webpack-dev-server能够使得webpack的编译能够简单的输出到硬盘上，webpack默认是内存文件系统，并不输出(当然有其他方法，比如再写个插件或更换文件系统啥的)，除了文件输出，webpack-dev-server还能够为我们提供mock数据服务，呵呵~，这里不展开了，大家有兴趣百度一下，还能够为我们访问后台接口作proxy，这里也不展开了。


通过上述操作，我们就能得到小程序结构的对等输出，剩下我们只需要将输出文件导入到小程序编辑器中，接下来就是开发工作了。嗯，这样就可以开始给小程序搬砖了，开心吗？


如果你想参考一下我们的编译代码，可以看这里 https://github.com/webkixi/aotoo-hub/blob/master/build/webpack.xcx.config.js


如果你想了解下我们的架构，可以看这里  https://github.com/webkixi/aotoo-hub


如果你想使用我们的架构，怕不怕？怕的话，你看着办吧，哈哈! 不怕看这里 https://www.npmjs.com/package/aotoo-cli


以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。