wxapp webpack plugin下載 - wxapp webpack plugin外掛程式原始碼下載

wxapp webpack plugin

Ai源碼

v0.19.0

下載

wxapp-webpack-plugin

微信小程式webpack 插件

為什麼要使用webpack

很多前端開發者都使用過webpack，透過webpack 開發JavaScript 專案可以帶來許多好處

支援透過yarn或npm引入和使用node_modules模組
支援豐富且靈活的loaders和plugins
支持alias
還有很多...

為什麼要使用這個插件

微信小程式開發需要有多個入口檔案（如app.js , app.json , pages/index/index.js等等），使用這個外掛程式只需要引入app.js即可，其餘檔案將會自動引入
若多個入口檔案（如pages/index/index.js和pages/logs/logs.js ）引進有相同的模組，這個外掛程式能避免重複打包相同模組
支援自動複製app.json上的tabbar圖片(v0.17.0 或以上)

使用方法

安裝

yarn add -D wxapp-webpack-plugin

配置webpack

在entry上引入{ app: './src/app.js' } , 這裡的./src/app.js為微信小程式開發所需的app.js 。注意key必須為app ， value支援數組）
在output上設定filename: '[name].js'。注意這裡[name].js是因為webpack將會打包產生多個文件，文件名稱會以[name]規則來輸出
新增new WXAppWebpackPlugin()到plugins

`loader`的使用提示

為了讓webpack能編譯和輸出非.js文件，配置時要按需加入各種loaders 。這裡作者推薦使用以下幾個對微信小程式開發很有用的loaders ：

file-loader: 用於輸出*.json ， *.wxss ， *.jpg之類的文件
css-loader: 使webpack能編譯或處理*.wxss上引用的文件
wxml-loader: 讓webpack能編譯或處理*.wxml上引用的文件

開發者也可以根據自身需求和習慣，使用sass-loader之類的loader 。

完整的專案開發腳手架，請查看wxapp-boilerplate

API

WXAppWebpackPlugin

用法

webpack.config.babel.js

 import WXAppWebpackPlugin from 'wxapp-webpack-plugin' ;
export default {
  // ...configs,
  plugins : [
    // ...other,
    new WXAppWebpackPlugin ( options )
  ] ,
} ;

Options

所有Options均為可選

clear (<Boolean>): 啟動webpack時清空dist目錄。預設為true
commonModuleName (<String>): 公用js檔名。預設為common.js
extensions (<Array<String>>): 腳本檔案後綴名。預設為['.js']

`Targets`

Webpack target 值，目前有Targets.Wechat和Targets.Alipay ，如果沒有配置，webpack target 將會自動設為Targets.Wechat 。如果需要開發支付寶小程序，則改為Targets.Alipay 。開發者也可以透過process.env.TARGET之類的配置來動態輸出。

範例

webpack.config.babel.js

 import WXAppWebpackPlugin , { Targets } from 'wxapp-webpack-plugin' ;
export default {
  // ...configs,
  target : Targets [ process . env . TARGET || 'Wechat' ] ,
} ;