微信小程序打包插件开发

责任编辑:网站建设公司 https://www.zequninfo.com/



每个插件都必须有一个webpack引擎的apply方法来执行你想要执行的代码。 

两个重要的对象,Compiler和编译时,可以在将事件挂钩绑定到webpack以执行该步骤时调用。事件挂钩可以读取编译器挂钩。 

模块和块之间的关系,我们可以理解每个文件都有一个模块,而一个块由多个模块组成。 

 Webpack整个打包过程都有那些事件 

如何编写一个简单的加载器 

如果你觉得你不能开始,你可以继续看看我是如何开发和改进的mini-program-webpack-loader一步步打包小程序。  

小程序有一个固定的例程。首先,您需要有一个app.json文件来定义所有页面路径。然后每个页面有四个文件:.js,.json,.wxml,.wxss。 

所以我使用app.json作为webpack条目。当webpack执行插件\\ u0027s apply时,我得到条目以了解小程序有哪些页面。 

有两个插件,MultiEntryPlugin,SingleEntryPlugin。 

你为什么要这样做? 

因为webpack会根据你的条目配置条目,而不仅仅是webpack配置中的条目,import,require.ensure会生成一个条目来确定生成的文件数,我们不想打包所有的js将页面转换为文件,需要

使用SingleEntryPlugin生成新的入口模块;和那些静态资源一样,我们可以使用MultiEntryPlugin插件来处理,使用这些文件作为入口模块依赖,在加载器中配置文件加载器来放置

静态文件输出。 

伪代码如下:  

 Const MultiEntryPlugin \\ u003d require \\ u0027webpack / lib / MultiEntryPlugin \\ u0027;  

 Const SingleEntryPlugin \\ u003d require \\ u0027webpack / lib / SingleEntryPlugin \\ u0027;   

类MiniPlugin { 

应用编译器{ 

让选项\\ u003d compiler.options  ## #Let context \\ u003d compiler.rootContext  

设置条目\\ u003d options.entry  

设置文件\\ u003d loadFilesentry  

让脚本\\ u003d files.filterfile \\ u003d \\ u003e /\\\\.js$/.testfile\\r\\n 

设置资产\\ u003d files.filterfile \\ u003d \\ u003e!/ \\\\。js $ / .testfile   

新的MultiEntryPlugincontext,assets,\\ _ \\ _设置__ \\ u0027.applycompiler   

 scripts.forEachfile \\ u003d \\ u003e { 

设置fileName \\ u003d relativecontext,file.replaceextnamefile,\\ u0027 \\ u0027;  

 New SingleEntryPlugincontext,file,fileName.applycompiler;  

}  

}  

}  

复制代码

#n ##当然,如果你执行上述操作,你会发现还会有一个main.js,xxx.js在使用MultiEntryPlugin时使用的名称,main.js对应于配置的条目生成的文件,以及xxx .js由MultiEntryPlugin生成。 

 

这些文件不是我们需要的,所以我们需要摆脱他。 

如果您熟悉webpack文档,我们有很多地方可以修改最终的打包文件,例如编译器

emit事件,optimizeChunks相关的编译事件可以实现。 

它本质上是修改compilation.assets对象。  

 emit-event用于mini-program-webpack-loader来处理这个不需要的内容。输出。   

小包装当然不是那么简单,你必须支持wxml,wxss,wxs和自定义组件引用,所以这次你需要一个加载器来完成,加载器需要做的事情非常简单 - 解析依赖文件,例如wxml需要解析导入组件的src,wxs的src,.wxss需要解析导入,需要wxs,最后使用loadModule方法将其添加到加载器中。 

自定义组件最初是在添加条目步骤中直接获得的,因此不需要加载器来完成它。  


这没有问题,但是开发经验相对较差。如果添加自定义组件,页面,webpack是不可感知的,那么您需要检查在页面中.json更改时是否添加了自定义。 

添加了组件或新页面。 

这时,我遇到了一个问题。 addModule方法无法添加自定义组件的js,因为自定义组件的js必须用作单独的条目文件。 

它可以在加载器中完成,所以尝试将文件传递给插件,因为插件在加载器之前执行,因此可以建立加载器和插件。  ## #Simple和粗鲁的方式:  

 // loader.js  

类MiniLoader {}   

 Module.exports \\ u003d函数content { 

 New MiniLoaderthis,content  

}  

 Module.exports。$ applyPluginInstance \\ u003d function plugin { 

 MiniLoader.prototype。 $ plugin \\ u003d plugin  

}   

 // plugin.js  

 Const loader \\ u003d require \\ u0027./loader \\ u0027  \\ n 

类MiniPlugin { 

应用编译器{ 

 Loader。$ app 

lyPluginInstancethis;  

}  

}  

复制代码 

但.... .... 

文件传递给插件,但是当你使用SingleEntryPlugin时,你会发现它没有任何效果。 

因为webpack在编译器生成后无法识别新模块,所以它没用。这时,我们需要根据文件猜测。我们如何让webpack感知新模块并根据文档中的事件进行关键字查询? 

您可以看到编译完成时会调用编译needAdditionalPass事件挂钩:  

 this.emitAssetscompilation,err \\ u003d \\ u003e { 

 if err return finalCallbackerr;   

如果compilation.hooks.needAdditionalPass.call { 

compilation.needAdditionalPass \\ u003d true;   \\ n 

 Const stats \\ u003d新的Statscompilation;  

 stats.startTime \\ u003d startTime;  

 stats.endTime \\ u003d Date.now;  

 this.hooks.done.callAsyncstats, err \\ u003d \\ u003e { 

如果错误返回finalCallbackerr;   

 this.hooks.additionalPass.callAsyncerr \\ u003d \\ u003e { 

 if err return finalCallbackerr;  

 this.compileonCompiled;  

};  

};  

 Return;  

}   

 this.emitRecordserr \\ u003d \\ u003e { 

如果错误返回finalCallbackerr;   

 Const stats \\ u00 3d new Statscompilation;  

 Stats.s 




泽群一站式网络服务机构竭诚为您提供:

区块链开发棋牌游戏网站建设网页设计APP开发小程序开发公众号制作网络营销推广SEO优化模板建站云服务等服务

相关资讯