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

这篇文章主要了如何使用webpack4来开发小程序，并分享了通过webpack构建小程序开发架构的经验。作为一名主要使用REACT的开发者，我在工作中经常与webpack打交道，这次我决定尝试将webpack用于小程序开发，以进一步提升开发效率和体验。

一直以来，我对小程序的开发框架都有浓厚的兴趣。通过观察小程序的原有架构，我发现它已经是一套相当完善的MVVM架构，类似于VUE，融合了VUE和REACT的特点，尤其以VUE为主。原生架构在某些方面还存在不足，比如缺少前端开发人员常用的npm包的引入、动态样式的编译等，这些都会影响开发效率。

我产生了通过webpack4来补充原有架构的想法。我认为，通过webpack4，我们可以实现对小程序项目的所有文件进行对等编译输出。具体来说，js和wxs文件可以通过babel进行编译，wxml和json文件则直接输出，wxss文件则通过stylus进行编译（我们在开发样式时主要使用stylus）。我们还可以利用webpack抽离公共模块文件，生成mon.js，并将runtime运行时作为一个独立文件。这样一来，我们既能精简代码，又能享受到webpack带来的各种好处。

在实际操作过程中，这个过程并非一帆风顺。我遇到了许多预料之外的困难和挑战。正是这些挑战促使我不断学习和，最终成功实现了通过webpack4来开发小程序的目标。

通过这个项目，我深刻体会到webpack的灵活性和强大功能。我相信，随着webpack技术的不断发展，小程序的开发将会变得更加高效和便捷。未来，我将继续webpack在小程序开发中的应用，为公司的业务发展贡献自己的力量。

如果你对小程序开发感兴趣，或者正在寻找一种更高效的小程序开发方法，那么通过webpack来构建小程序的开发架构或许能给你带来一些启示。希望我的经验能对你有所帮助，期待与你共同更多关于小程序开发的话题。webpack：模块配置与文件处理

=======================

在前端工程中，webpack是一个强大的模块打包工具，它能够帮助我们处理各种类型的文件，包括JavaScript、样式表、图片等。以下是对webpack模块配置的，以及对非JS文件处理的。

一、模块配置

--

webpack的模块配置是项目的核心部分，它定义了webpack应该如何处理不同类型的文件。以下是一个典型的模块配置示例：

```javascript

module: {

rules: [

// ...其他规则

]

}

```

在这个配置中，我们可以看到针对不同文件类型（如`.wxml`、`.wxss`等）的处理规则。这些规则包括使用的loader（如`html-loader`、`babel-loader`等）以及相关的选项。每一个规则都定义了webpack应该如何处理匹配的文件。

二、全文件entry

--

在webpack中，entry是入口文件的指定，webpack会从入口文件开始，逐步构建依赖图，然后生成打包文件。为了处理小程序中的多种文件类型，我们需要将所有文件整理为entry给webpack处理。这样做的好处是js能够使用npm包，所有文件都能够支持热更新机制。

以下是生成entry的代码示例：

```javascript

function entries(dir) {

// ...代码逻辑

return jsFiles; // 返回所有entry文件的集合

}

```

这个函数会遍历指定目录下的所有文件，并根据文件类型（如`.js`、`.wxml`等）生成对应的entry。这样webpack就能正确处理这些文件了。

三、非JS文件的输出处理

-

在webpack中，我们通常只将JS文件作为entry。对于小程序开发，我们还需要处理非JS文件（如`.wxml`、`.wxss`等）。我们可以通过自定义loader和插件来实现这一目标。在上述的模块配置中，我们使用了`relativeFileLoader`和其他的loader来处理这些非JS文件。`relativeFileLoader`会将这些文件的内容作为字符串输出，然后我们可以在JS文件中通过import语句引入这些文件。这样，我们就可以在JS中使用这些非JS文件的内容了。我们还需要使用特定的插件来将这些文件输出到正确的位置。这样，当webpack打包完成后，我们就能得到完整的、能够运行的小程序代码了。

通过合理的配置和编写自定义的loader和插件，我们可以让webpack处理小程序中的多种文件类型。这不仅提高了开发效率，也使得代码管理和维护变得更加方便。Webpack的奇妙世界：从报错到优雅处理非JS文件

哈哈，谁说webpack会报错呢？实际上，webpack就像一位不知疲倦的工匠，会傻乎乎地把每个entry文件都当做JS来处理，并尝试正常输出。但当遇到诸如“.wxml.js”这样的文件时，你可能会感到困惑，因为这些并不是你需要的文件类型。那么，该如何优雅地处理这些非JS文件呢？答案是：通过插件来帮忙。

我们的插件会在pilation阶段介入，对文件进行处理。我们有一个过滤机制，能够识别并排除掉带有“nobuild__”前缀的非JS文件。这些文件在生成entry代码时被特别标注，它们在webpack的编译过程中不会被编译生成，而是由模块中的-loader处理完成后，被file-loader抛出。

我们还会进行全局变量的替换。由于微信小程序的环境特殊性，我们需要将全局变量从“window”或“global”替换为“wx”。这一过程是通过读取每个文件的源码，进行替换后，再重组源码完成的。这个过程确保了我们的代码能够在小程序环境下正常运行。