資訊專欄INFORMATION COLUMN
開門見山地說，小程序在日常開發(fā)中使用原生框架來開發(fā)還是挺不方便的，比如：
不支持 npm 包
不支持各種 CSS 預(yù)編譯器
不支持配置 Babel 來轉(zhuǎn)換一些 JavaScript 新特性
這樣一來和日常開發(fā)前端頁面的體驗相比來說，簡直就像在刀耕火種。
那么為了解決這些問題，我們能不能將前端開發(fā)中常用的 webpack 移植到小程序開發(fā)中呢？
當(dāng)然可以！
0.源碼地址在 webpack-simple 中文件結(jié)構(gòu)和小程序相似。
而在 webpack-vue 中還增加了 vue-loader，因此你甚至還能利用 .vue 文件編寫單文件組件。
注：已封裝到 https://tuateam.github.io/tua... 中...1.文件結(jié)構(gòu)
既然用 webpack 來編譯源代碼，那么很自然的我們的文件結(jié)構(gòu)首先要分為 src/ 和 dist/，開發(fā)者工具的目標(biāo)應(yīng)該是 dist/ 目錄。
注：開發(fā)者工具打開的應(yīng)該是根目錄，這樣可以保存各種設(shè)置，可以在 project.config.json 中配置 "miniprogramRoot": "./dist/",1.1.src/ 中文件結(jié)構(gòu)大概長這樣：
.
├── 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/: 應(yīng)用入口
assets/: 資源文件，比如圖片
comps/: 組件
pages/: 頁面
scripts: 公用代碼
scripts/const: 常量（已配置別名 @const）
scripts/utils: 輔助函數(shù)（已配置別名 @utils）
styles/: 公用樣式
templates/: 模板
1.2.dist/ 中文件結(jié)構(gòu)大概長這樣：.
├── 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.整個項目文件結(jié)構(gòu)大概長這樣：. ├── README.md ├── dist/ ├── package.json ├── project.config.json ├── src/ ├── webpack.config.babel.js └── yarn.lock
src/: 源碼
dist/: 打包后代碼
2.webpack 基礎(chǔ)配置 2.1.entry/output小程序場景下的配置應(yīng)該是多入口，主要分為 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 實現(xiàn)的... http://mpvue.com/build/mpvue-...2.2.CommonChunk
在 webpack 4 中有一個 breaking change，即使用 SplitChunksPlugin 替換了之前很常用的 CommonsChunkPlugin
主要提取了三部分的公共代碼：
runtime: 是 webapck 在運行時連接各個模塊的代碼
vendors: 是提取的 node_modules 下的依賴
scripts: 是提取的 src/scripts/ 下的依賴
現(xiàn)在又碰到個新的問題：如何引入這些 chunks？
在前端項目中一般我們通過 HtmlWebpackPlugin 插件在 html 文件中添加
注：這句話是黃章說的，Teacher Luo 沒說過這話喲~
以上 to be continued...
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/96869.html
摘要：假如圖片鏈接有問題比如，依然展示占位圖。使用單文件組件將配置模板腳本樣式寫在一個文件中，方便維護。 零、問題的由來 一般在前端展示圖片時都會碰到這兩個常見的需求： 圖片未加載完成時先展示占位圖，等到圖片加載完畢后再展示實際的圖片。 假如圖片鏈接有問題（比如 404），依然展示占位圖。甚至你還可以增加點擊圖片再次加載的功能。（例如知乎） 然鵝，小程序原生組件 image 并沒有提供這...
摘要：而小程序官方的是在中調(diào)用方法來改變數(shù)據(jù)，從而改變界面。為了寫測試讓咱們來重構(gòu)一把，利用學(xué)習(xí)過的函數(shù)式編程中的高階函數(shù)把依賴注入。也就是說當(dāng)中的某個數(shù)據(jù)更新的時候，我們并不知道它會影響哪個中的屬性，特別的還有依賴于的情況。 眾所周知 Vue 是借助 ES5 的 Object.defineProperty 方法設(shè)置 getter、setter 達到數(shù)據(jù)驅(qū)動界面，當(dāng)然其中還有模板編譯等等其他...
摘要：前言微信小程序中可以直接運行頁面，這一新組件的產(chǎn)生，可能直接導(dǎo)致小程序數(shù)量迎來一波高峰。微信小程序配置系列問題配置域名業(yè)務(wù)域名中配置的就是小程序以及和中引用的域名。 今日勵志語 要接受自己行動所帶來的責(zé)任而非自己成就所帶來的榮耀。 前言 微信小程序中可以直接運行 web 頁面，這一新組件 web-view 的產(chǎn)生，可能直接導(dǎo)致小程序數(shù)量迎來一波高峰。本篇博文將從業(yè)務(wù)選型，微信小程序后臺...
項目需求簡單描述 用戶長按錄音，松手后直接結(jié)束錄音，結(jié)束錄音后，用戶可以選擇重新錄音、播放剛才的錄音，上傳錄音（這里的上傳錄音指上傳到自己服務(wù)器，上傳步驟是，前端調(diào)用wx.uploadVoice，后臺再到微信服務(wù)器下載音頻文件，上傳到自己的服務(wù)器）。注意，音頻文件自上傳時間算起在微信服務(wù)器的有效期為3天。由于后臺從微信服務(wù)器下載的音頻文件是amr格式的，需要后臺先把amr文件轉(zhuǎn)換成MP3，前端用a...
閱讀 667·2023-04-25 15:49
閱讀 3120·2021-09-22 15:13
閱讀 1258·2021-09-07 10:13
閱讀 3480·2019-08-29 18:34
閱讀 2562·2019-08-29 15:22
閱讀 512·2019-08-27 10:52
閱讀 689·2019-08-26 18:27
閱讀 3023·2019-08-26 13:44
