微信官方已经开放了插件的共享，，，，那么关于微信小程序开发来说，，，，怎样做到小程序打包插件呢？？下面来看看文章。。。。。。

若是你看过文档，，，，相信你一定知道：

• 每个插件必需要有 apply 要领，，，，用于 webpack 引擎执行你想要执行的代码。。。。。。
• 两个主要的工具 Compiler 和 Compilation，，，，你可以在上面绑定事务钩子（webpack 执行到该方法的时间挪用），，，，详细有哪些事务钩子可以阅读Compiler hooks。。。。。。
• module 和 chunk 的关系，，，，我们可以明确为每个文件都会有一个 module，，，，而一个 chunk 则是由多个 module 来组成。。。。。。
• webpack 整个打包流程有那些事务
• 怎样写一个简朴的 loader

若是感受无从着手，，，，可以继续看看我是怎样一步步开发并完善 mini-program-webpack-loader 来打包小程序的。。。。。。

小程序有一个牢靠的套路，，，，首先需要有一个 app.json 文件来界说所有的页面路径，，，，然后每个页面有四个文件组成：.js，，，，.json，，，，.wxml，，，，.wxss。。。。。。以是我以 app.json 作为 webpack entry，，，，当 webpack 执行插件的 apply 的时间，，，，通过获取 entry 来知道小程序都有哪些页面。。。。。。

这里使用了两个插件 MultiEntryPlugin，，，，SingleEntryPlugin。。。。。。为什么要这样做呢？？由于 webpack 会凭证你的 entry 设置（这里的 entry 不但是 webpack 设置里的 entry，，，，import(), require.ensure() 都会天生一个 entry）来决议天生文件的个数，，，，我们不希望把所有页面的 js 打包到一个文件，，，，需要使用 SingleEntryPlugin 来天生一个新的 entry module；；；；而那些静态资源，，，，我们可以使用 MultiEntryPlugin 插件来处理，，，，把这些文件作为一个 entry module 的依赖，，，，在 loader 中设置 file-loader 即可把静态文件输出。。。。。。伪代码如下：

const MultiEntryPlugin = require('webpack/lib/MultiEntryPlugin');
 const SingleEntryPlugin = require('webpack/lib/SingleEntryPlugin');
 
 class MiniPlugin {
    apply (compiler) {
        let options = compiler.options
        let context = compiler.rootContext
        let entry = options.entry
        let files = loadFiles(entry)
        let scripts = files.filter(file => /\.js$/.test(file))
        let assets = files.filter(file => !/\.js$/.test(file))
        
       new  MultiEntryPlugin(context, assets, '__assets__').apply(compiler)
        
        scripts.forEach((file => {
            let fileName = relative(context, file).replace(extname(file), '');
            new SingleEntryPlugin(context, file, fileName).apply(compiler);
        })
    }
 }
复制代码

虽然，，，，若是像上面那样做，，，，你会发明最后会多出一个 main.js，，，，xxx.js（使用 MultiEntryPlugin 时填的名字），，，，main.js 对应的是设置的 entry 天生的文件，，，，xxx.js 则是 MultiEntryPlugin 天生的。。。。。。这些文件不是我们需要的，，，，以是需要去掉他。。。。。。若是熟悉 webpack 文档，，，，我们有许多地方可以修改最终打包出来的文件，，，，如 compiler 的 emit 事务，，，，compilation 的 optimizeChunks 相关的事务都可以实现。。。。。。其实质上就是去修改 compilation.assets 工具。。。。。。

在 mini-program-webpack-loader 中就使用了 emit 事务来处理这种不需要输出的内容。。。。。。

小程序打包虽然没这么简朴，，，，还得支持wxml、wxss、wxs和自界说组件的引用，，，，以是这个时间就需要一个 loader 来完成了，，，，loader 需要做的事情也很是简朴 —— 剖析依赖的文件，，，，如 .wxml 需要剖析 import 组件的 src，，，，wxs 的 src，，，，.wxss 需要剖析 @import，，，，wxs 的 require，，，，最后在 loader 中使用 loadModule 要领添加即可。。。。。。自界说组件一最先在 add entry 方法的时间直接获取了，，，，以是不需要 loader 来完成。。。。。。

这样做也没什么问题，，，，可是开发体验是较量差的，，，，如再添加一个自界说组件，，，，一个页面，，，，webpack 是无感知的，，，，以是需要在页面中的 .json 爆发改变时检查是不是新增了自界说组件或者新增了页面。。。。。。这个时间遇到一个问题，，，，自界说组件的 js 是不可通过 addModule 的方式来添加的，，，，由于自界说组件的 js 必需作为自力的入口文件。。。。。。在 loader 中是做不了，，，，以是实验把文件传到 plugin 中（由于 plugin 先于 loader 执行，，，，以是是可以建设 loader 和 plugin 通讯的）。。。。。。

简朴粗暴的方式：

// loader.js
class MiniLoader {}

module.exports = function (content) {
    new MiniLoader(this, content)
}
module.exports.$applyPluginInstance = function (plugin) {
  MiniLoader.prototype.$plugin = plugin
}

// plugin.js
const loader = require('./loader')
class MiniPlugin {
    apply (compiler) {
        loader.$applyPluginInstance(this);
    }
}
复制代码

可是...。。。。。。文件是传到 plugin 了，，，，可是再使用 SingleEntryPlugin 时你会发明，，，，没效果。。。。。。由于在 compiler make 之后 webpack 已经不可感知新的 module 添加了，，，，以是是没有用的，，，，这个时间就需要凭证文档猜，，，，怎么样才华让 webpack 感知到新的 module，，，，凭证文档中的事务做要害字盘问，，，，可以发明在编译完成的时间会挪用 compilation needAdditionalPass 事务钩子：

this.emitAssets(compilation, err => {
    	if (err) return finalCallback(err);
    
    	if (compilation.hooks.needAdditionalPass.call()) {
    		compilation.needAdditionalPass = true;
    
    		const stats = new Stats(compilation);
    		stats.startTime = startTime;
    		stats.endTime = Date.now();
    		this.hooks.done.callAsync(stats, err => {
    			if (err) return finalCallback(err);
    
    			this.hooks.additionalPass.callAsync(err => {
    				if (err) return finalCallback(err);
    				this.compile(onCompiled);
    			});
    		});
    		return;
    	}
    
    	this.emitRecords(err => {
    		if (err) return finalCallback(err);
    
    		const stats = new Stats(compilation);
    		stats.startTime = startTime;
    		stats.endTime = Date.now();
    		this.hooks.done.callAsync(stats, err => {
    			if (err) return finalCallback(err);
    			return finalCallback(null, stats);
    		});
    	});
    });
复制代码

若是在这个事务钩子返回一个 true 值，，，，则可以使 webpack 挪用 compiler additionalPass 事务钩子，，，，实验在这里添加文件，，，，果真是可以的。。。。。。

虽然，，，，小程序打包尚有些差别的地方，，，，好比分包，，，，怎样用好 splitchunk，，，，就不在啰嗦了，，，，当你最先以后你会发明有许多的要领来实现想要的效果。。。。。。

插件开发到这里差未几了，，，，总的来说，，，，webpack 就是变着名堂的回调，，，，当你知道每个回调该做什么的时间，，，，webpack 用起来就轻松了。。。。。。显着我不知道，，，，由于在开发历程中遇到了一些问题。。。。。。

遇到的问题

1.怎样在小程序代码中支持 resolve alias，，，，node_modules？？

既然是工具，，，，虽然需要做更多的事情，，，，有赞的小程序那么重大，，，，若是支持 resolve alias，，，，node_modules 可以使得项目更利便维护，，，，或许你会说这不是 webpack 最基本的功效吗，，，，不是的，，，，我们虽然是希望可以在任何文件中使用 alias，，，，node_modules 支持的不但仅是 js。。。。。。虽然这样做就意味着事情将变得重大，，，，首先就是获取文件路径，，，，必需是异步的，，，，由于在 webpack 4 中 resolve 不再支持 sync。。。。。。其次就是小程序的目录名不可是 node_modules，，，，这时就需要一种盘算相对路径的规则，，，，照旧相对打包输出的，，，，而不是相对目今项目目录。。。。。。

2.多个小程序项目的合并

有赞从小程序来讲，，，，有微商城版，，，，有零售版，，，，以及公共版，，，，其中大多基础功效，，，，营业都是相同的，，，，虽然不可再每个小程序在开发一次，，，，以是这个工具具备合并多个小程序虽然是必需的。。。。。。这样的合并稍微又要比从 node_modules 中取文件重大一些，，，，由于需要包管多个小程序合并后的页面是准确的，，，，并且要包管路径稳固。。。。。。

这两个问题的最终的解决方案既是以 webpack rootContext 的 src 目录为基准目录，，，，以该目录所在路径盘算打包文件的绝对路径，，，，然后凭证入口文件的 app.json 所在目录的路径盘算出最终输出路径。。。。。。

exports.getDistPath = (compilerContext, entryContexts) => {
  /**
   * webpack 以 config 所在目录的 src 为打包入口
   * 以是可以凭证该目录追溯源文件地点
   */
  return (path) => {
    let fullPath = compilerContext
    let npmReg = /node_modules/g
    let pDirReg = /^[_|\.\.]\//g

    if (isAbsolute(path)) {
      fullPath = path
    } else {
      // 相对路径：webpack 最后天生的路径，，，，打包入口外的文件都以 '_' 体现上级目录

      while (pDirReg.test(path)) {
        path = path.substr(pDirReg.lastIndex)
        fullPath = join(fullPath, '../')
      }

      if (fullPath !== compilerContext) {
        fullPath = join(fullPath, path)
      }
    }
    // 凭证 entry 中界说的 json 文件目录获取打包后所在目录，，，，若是不可获取就返回原路径
    let contextReg = new RegExp(entryContexts.join('|'), 'g')

    if (fullPath !== compilerContext && contextReg.exec(fullPath)) {
      path = fullPath.substr(contextReg.lastIndex + 1)
      console.assert(!npmReg.test(path), `文件${path}路径过失：不应该还包括 node_modules`)
    }

    /**
     * 若是有 node_modules 字符串，，，，则去模？槊
     * 若是 app.json 在 node_modules 中，，，，那 path 不应该包括 node_modules 
     */

    if (npmReg.test(path)) {
      path = path.substr(npmReg.lastIndex + 1)
    }

    return path
  }
}
复制代码

3.怎样把子包单独依赖的内容打包到子包内

解决这个问题的要领是通过 optimizeChunks 事务，，，，在每个 chunk 的依赖的 module 中添加这个 chunk 的入口文件，，，，然后在 splitChunk 的 test 设置中检查 module 被依赖的数目。。。。。。若是只有一个，，，，并且是被子包依赖，，，，则打包到子包内。。。。。。

4.webpack 支持单文件失败

这是一个未解决的问题，，，，当实验使用 webpack 来支持单文件的时间，，，，似乎没那么利便：

• 单文件拆分为四个文件后，，，，可以使用 emitFile 和 addDependency 来建设文件，，，，可是建设的文件不会执行 loader
• 使用 loadModule 会由于文件系统不保存该文件会报错