前言
自从微信宣布支持小程序使用第三方框架以及扩展组件功能之后，越来越多的开发者开始思考如何将其他前端技术应用到小程序中。而其中最被广泛使用的就是 Webpack 打包工具。
在实际使用中，虽然 Webpack 可以极大的提高开发效率和应用性能，但同样也会带来一些问题和挑战，特别是在小程序开发中。那么本篇文章就来详细介绍如何在微信小程序中使用 Webpack 进行打包，并总结一些实际应用中遇到的问题和解决方案。
Webpack 打包小程序优势
使用 Webpack 进行打包，可以极大的提高小程序开发效率和应用性能。以下是一些 Webpack 在小程序中的优势：
代码分离和模块化：将代码分离成多个文件，方便维护和组织代码结构；同时采用模块化开发，提高代码可复用性和通用性。
插件、负载均衡以及错误监控：Webpack 可以通过插件的方式来增加特殊功能，如热更新、警告和错误报告等。同时，可以通过负载均衡提高性能并有效管理复杂性。
代码优化和打包压缩：使用 Webpack 可以轻易的实现代码优化和体积的显著减少，从而提升小程序的性能和加载速度。
便于开发与上线管理：Webpack 可以帮忙开发人员在本地模拟生产环境，方便调试项目。也可以打包生成代码文件，更容易上线到 App Store 或微信小程序商店。
Webpack 配置及实战
安装及版本要求
在开始实战前，需要确保电脑中已安装了 Node.js (v8.0.0 以上版本) 和 NPM (v5.0.0 以上版本)，并全局安装 Webpack 和微信小程序 npm 包构建工具。
下面是安装命令：
Node.js 和 NPM：
brew install nodeWebpack：
npm install webpack webpack-cli webpack-dev-server -g
微信小程序 npm 包构建工具：
npm install -g wepy-cli
Wepy 已经默认使用了 Webpack，所以在新建 Wepy 项目时，就可以直接使用了。
Webpack 配置文件
使用 Webpack 进行打包需要先创建对应的配置文件。在小程序中，这里需要创建两份配置文件：webpack.config.js 和 wepy.config.js。
其中，webpack.config.js 负责 Webpack 的配置设置，wepy.config.js 则会在 Webpack 打包的过程中被引用，用于告诉 Webpack 该如何处理小程序的特殊情况。
webpack.config.js
webpack.config.js 是 Webpack 的主配置文件。它的作用是设置 Webpack 的入口文件、输出路径、模块解析规则、代码压缩等等。
以下是一个基本的 webpack.config.js 配置：
-- -------------------- ---- ------- ----- ---- - ---------------- ----- ----------------- - ------------------------------- ----- -------------- - ----------------------------------- ----- -------------------- - ----------------------------------- ----- ----------------------- - ---------------------------------------------- -------------- - - ------ -------------------- ------ ---------- ------- - ----- -------------------- -------- --------- -------- -- ------- - ------ - - ----- -------- -------- --------------- ---- - ------- --------------- -------- - -------- --------------------- - - -- - ----- ---------- ---- - ---------------------------- ------------- ------------- - -- - ----- ------------------- ------- -------------- -------- - ----------- -------- - - - -- ------------- - ---------- - --- ---------------- ------ ----- --------- ----- ---------- ---- --- --- --------------------------- - -- -------- - --- ------------------- - ----- --------------- --- ---------- -- - ----- -------------- --- --------- -- - ----- ----------------- --- ------------ -- - ----- ----------------- --- ------------ -- - ----- --------------------- --- ---------------- - --- --- ---------------------- --------- ------------- -- - --展开代码
wepy.config.js
wepy.config.js 文件是在使用 WePy 引用的 Webpack 打包项目的时候使用到的。如果你用 Webpack 编译小程序，则直接使用 webpack.config.js 配置即可，但使用 WePy 引用 Webpack 的话来说，需要配置 wepy.config.js 文件。
以下是一个示例 wepy.config.js 配置：
-- -------------------- ---- ------- -------------- - - ------- ----- -------- - ------ - ---- ------- -- ------- -------- - -- ---------- - ------ - ---------- ----- -------- --------------------- - -- -------- - -------- - ------- -------- ------- - ----- ---------- -------- ----------------- -- --------- -- -- -- --展开代码
Webpack 开始编译
在完成配置文件之后，就可以使用 Webpack 进行编译了。这里有三种不同的编译方式。
开发者命令行（CLI）
在命令行中输入以下命令：
webpack --mode development
这样就可以将 JavaScript 和 CSS 文件打包到 dist 文件夹中。
NPM 脚本
在 package.json 文件中添加以下脚本：
{ // ... "scripts": { "build": "webpack --mode production" }, // ... }
这样就可以通过运行 npm run build 命令来打包生产版本。
Webpack-dev-server
Webpack-dev-server 是一种快速启动服务器的方法，该方式可以完美支持热更新，并在编译时展示编译进度和错误信息。
以下是一个使用 Webpack-dev-server 的示例：
webpack-dev-server --mode development --open
以上命令将自动打开浏览器窗口，启动一个名为“localhost:8080”的本地服务器项目，并自动跳转到该地址。
Webpack 遇到的问题及解决方案
Webpack 热更新
在使用 Webpack 进行编译时，经常遇到一些热更新问题。这些问题可能会导致部分更新的内容无法被实时更新，例如图片和样式的更新等。
解决方案
在 wepy.config.js 或 webpack.config.js 中添加以下配置即可实现 HMR（Hot Module Replacement，热模块替换）功能：
watchOptions: { ignored: /node_modules/, aggregateTimeout: 300, poll: 1000, },
CSS/Sass/Less 处理
小程序默认采用 wxss 作为样式文件，这与常规的 CSS/LESS/Sass 不同。因此，在使用 Webpack 进行打包时，需要将这些不同类型的样式文件转换成 wxss。
解决方案
可以使用特定的加载器来将 CSS/LESS/Sass 等文件转换成 wxss。以下是一个转换 LESS 文件的示例：
{ test: /\.less$/, use: [ MiniCssExtractPlugin.loader, 'css-loader', 'less-loader' ] }
HTML 文件打包
当我们将 Webpack 应用到小程序开发中时，通常会有一个 HTML 页面作为小程序的主入口。但是，在小程序中，HTML 文件是不能直接使用的。例如，在小程序中跳转到其他页面时，只能使用 wx.navigateTo、wx.redirectTo 或 wx.navigateBack 等方法，而不是通过 HTML 链接的方式。
因此，我们需要将 HTML 文件转换成 WXML 文件再进行打包。
解决方案
在 webpack.config.js 的 plugins 中加入以下代码：
-- -------------------- ---- ------- --- ------------------- --------- ------------------- --------- ------------- ------- ------ ------- - --------------- ----- ------------------- ---- - ---展开代码
这里使用 HtmlWebpackPlugin 将 HTML 文件转换成 WXML 文件。
总结
在小程序中使用 Webpack 进行打包，可以帮助开发者更好的组织和管理小程序，提高开发效率和应用性能。在实际应用中，可能会遇到很多问题，如热更新问题、CSS 文件处理问题以及 HTML 文件打包问题等，但只要学会了解决方案，就能够轻松应对这些问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64d59cbbb5eee0b525d5bb6f
