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