开门见山地说，小程序在日常开发中使用原生框架来开发还是挺不方便的，比如：
不支持 npm 包
不支持各种 CSS 预编译器
不支持配置 Babel 来转换一些 JavaScript 新特性
这样一来和日常开发前端页面的体验相比来说，简直就像在刀耕火种。
那么为了解决这些问题，我们能不能将前端开发中常用的 webpack 移植到小程序开发中呢？
当然可以！
0.源码地址在 webpack-simple 中文件结构和小程序相似。
而在 webpack-vue 中还增加了 vue-loader，因此你甚至还能利用 .vue 文件编写单文件组件。
注：已封装到 https://tuateam.github.io/tua... 中...1.文件结构
既然用 webpack 来编译源代码，那么很自然的我们的文件结构首先要分为 src/ 和 dist/，开发者工具的目标应该是 dist/ 目录。
注：开发者工具打开的应该是根目录，这样可以保存各种设置，可以在 project.config.json 中配置 "miniprogramRoot": "./dist/",1.1.src/ 中文件结构大概长这样：
.
├── app
│ ├── app.js
│ ├── app.json
│ └── app.scss
├── assets
│ └── vue-logo.png
├── comps
│ └── todo
│ ├── todo.js
│ ├── todo.json
│ ├── todo.less
│ └── todo.wxml
├── pages
│ └── index
│ ├── index.js
│ ├── index.json
│ ├── index.less
│ └── index.wxml
├── scripts
│ ├── const
│ │ ├── README.md
│ │ └── index.js
│ └── utils
│ ├── README.md
│ ├── event.js
│ ├── format.js
│ ├── index.js
│ └── log.js
├── styles
│ ├── global.styl
│ ├── todomvc-app-css.css
│ └── todomvc-common-base.css
└── templates
└── info.wxml
app/: 应用入口
assets/: 资源文件，比如图片
comps/: 组件
pages/: 页面
scripts: 公用代码
scripts/const: 常量（已配置别名 @const）
scripts/utils: 辅助函数（已配置别名 @utils）
styles/: 公用样式
templates/: 模板
1.2.dist/ 中文件结构大概长这样：.
├── app.js
├── app.js.map
├── app.json
├── app.wxss
├── assets
│ └── vue-logo.png
├── chunks
│ ├── runtime.js
│ ├── runtime.js.map
│ ├── scripts.js
│ ├── scripts.js.map
│ ├── vendors.js
│ └── vendors.js.map
├── comps
│ └── todo
│ ├── todo.js
│ ├── todo.js.map
│ ├── todo.json
│ ├── todo.wxml
│ └── todo.wxss
├── pages
│ └── index
│ ├── index.js
│ ├── index.js.map
│ ├── index.json
│ ├── index.wxml
│ └── index.wxss
└── templates
└── info.wxml
chunks/: 公共依赖
runtime: 是 webapck 在运行时连接各个模块的代码
vendors: 是提取的 node_modules 下的依赖
scripts: 是提取的 src/scripts/ 下的依赖
1.3.整个项目文件结构大概长这样：. ├── README.md ├── dist/ ├── package.json ├── project.config.json ├── src/ ├── webpack.config.babel.js └── yarn.lock
src/: 源码
dist/: 打包后代码
2.webpack 基础配置 2.1.entry/output小程序场景下的配置应该是多入口，主要分为 app、pages、comps 这三类。
app: 将 src/app/ 下的文件编译成 dist/ 根目录下的 app.js/app.json/app.wxss
pages: src/pages/ -> dist/pages/
comps: src/comps/ -> dist/comps/
在输出 output 部分有个坑：因为小程序使用的是 global，所以必须添加配置 output.globalObject 为 global。
不然...
thirdScriptError VM937:1
sdk uncaught third Error
Cannot read property "webpackJsonp" of undefined
TypeError: Cannot read property "webpackJsonp" of undefined
at http://127.0.0.1:40247/appservice/chunks/runtime.js:34:51
at http://127.0.0.1:40247/appservice/chunks/runtime.js:38:2
at require (http://127.0.0.1:40247/appservice/__dev__/WAService.js:19:7859)
at http://127.0.0.1:40247/appservice/__dev__/WAService.js:19:7573
at http://127.0.0.1:40247/appservice/app.js:3:1
at require (http://127.0.0.1:40247/appservice/__dev__/WAService.js:19:7859)
at http://127.0.0.1:40247/appservice/appservice?t=1527755092895:1020:9
// runtime
var a = window.webpackJsonp = window.webpackJsonp || []
详情可参阅这个 pr
ps 在 mpvue 中似乎是通过修改 target 实现的... http://mpvue.com/build/mpvue-...2.2.CommonChunk
在 webpack 4 中有一个 breaking change，即使用 SplitChunksPlugin 替换了之前很常用的 CommonsChunkPlugin
主要提取了三部分的公共代码：
runtime: 是 webapck 在运行时连接各个模块的代码
vendors: 是提取的 node_modules 下的依赖
scripts: 是提取的 src/scripts/ 下的依赖
现在又碰到个新的问题：如何引入这些 chunks？
在前端项目中一般我们通过 HtmlWebpackPlugin 插件在 html 文件中添加
注：这句话是黄章说的，Teacher Luo 没说过这话哟~
以上 to be continued...
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/96869.html
摘要：假如图片链接有问题比如，依然展示占位图。使用单文件组件将配置模板脚本样式写在一个文件中，方便维护。 零、问题的由来 一般在前端展示图片时都会碰到这两个常见的需求： 图片未加载完成时先展示占位图，等到图片加载完毕后再展示实际的图片。 假如图片链接有问题（比如 404），依然展示占位图。甚至你还可以增加点击图片再次加载的功能。（例如知乎） 然鹅，小程序原生组件 image 并没有提供这...
摘要：而小程序官方的是在中调用方法来改变数据，从而改变界面。为了写测试让咱们来重构一把，利用学习过的函数式编程中的高阶函数把依赖注入。也就是说当中的某个数据更新的时候，我们并不知道它会影响哪个中的属性，特别的还有依赖于的情况。 众所周知 Vue 是借助 ES5 的 Object.defineProperty 方法设置 getter、setter 达到数据驱动界面，当然其中还有模板编译等等其他...
摘要：前言微信小程序中可以直接运行页面，这一新组件的产生，可能直接导致小程序数量迎来一波高峰。微信小程序配置系列问题配置域名业务域名中配置的就是小程序以及和中引用的域名。 今日励志语 要接受自己行动所带来的责任而非自己成就所带来的荣耀。 前言 微信小程序中可以直接运行 web 页面，这一新组件 web-view 的产生，可能直接导致小程序数量迎来一波高峰。本篇博文将从业务选型，微信小程序后台...
项目需求简单描述 用户长按录音，松手后直接结束录音，结束录音后，用户可以选择重新录音、播放刚才的录音，上传录音（这里的上传录音指上传到自己服务器，上传步骤是，前端调用wx.uploadVoice，后台再到微信服务器下载音频文件，上传到自己的服务器）。注意，音频文件自上传时间算起在微信服务器的有效期为3天。由于后台从微信服务器下载的音频文件是amr格式的，需要后台先把amr文件转换成MP3，前端用a...
阅读 623·2023-04-25 15:49
阅读 3078·2021-09-22 15:13
阅读 1084·2021-09-07 10:13
阅读 3445·2019-08-29 18:34
阅读 2538·2019-08-29 15:22
阅读 478·2019-08-27 10:52
阅读 641·2019-08-26 18:27
阅读 2972·2019-08-26 13:44
