object
專屬于小程序的配置。
object
小程序編譯過程的相關配置。
array
配置小程序編譯過程中排除不需要經(jīng)過 Taro 編譯的文件,數(shù)組里面可以包含具體文件路徑,也可以是判斷函數(shù),同 Rule.exclude。
假設要排除某個文件,可以配置要排除的文件的具體路徑:
module.exports = {
// ...
mini: {
// ...
compile: {
exclude: [
path.resolve(__dirname, '..', 'src/pages/index/vod-wx-sdk-v2.js')
]
}
}
}
也可以配置判斷函數(shù):
module.exports = {
// ...
mini: {
// ...
compile: {
exclude: [
modulePath => modulePath.indexOf('vod-wx-sdk-v2') >= 0
]
}
}
}
array
配置額外需要經(jīng)過 Taro 編譯的文件,使用方式與 mini.compile.exclude 一致,同 Rule.include。
例如 Taro 默認不編譯 node_modules
中的文件,可以通過這個配置讓 Taro 編譯 node_modules
中的文件。
function
自定義 Webpack 配置。
這個函數(shù)會收到三個參數(shù)。第一個參數(shù)是 webpackChain 對象,可參考 webpack-chain 的 API 進行修改,第二個參數(shù)是 webpack
實例,第三個參數(shù) PARSE_AST_TYPE
是小程序編譯時的文件類型集合。
第三個參數(shù)的取值如下:
export enum PARSE_AST_TYPE {
ENTRY = 'ENTRY',
PAGE = 'PAGE',
COMPONENT = 'COMPONENT',
NORMAL = 'NORMAL',
STATIC = 'STATIC'
}
例子:
// 這是一個添加 raw-loader 的例子,用于在項目中直接引用 md 文件
module.exports = {
// ...
mini: {
// ...
webpackChain (chain, webpack) {
chain.merge({
module: {
rules: {
myloader: {
test: /\.md$/,
use: [{
loader: 'raw-loader',
options: {}
}]
}
}
}
})
}
}
}
// 這是一個添加插件的例子
module.exports = {
// ...
mini: {
// ...
webpackChain (chain, webpack) {
chain.merge({
plugin: {
install: {
plugin: require('npm-install-webpack-plugin'),
args: [{
// Use --save or --save-dev
dev: false,
// Install missing peerDependencies
peerDependencies: true,
// Reduce amount of console logging
quiet: false,
// npm command used inside company, yarn is not supported yet
npm: 'cnpm'
}]
}
}
})
}
}
}
object
可用于修改、拓展 Webpack 的 output 選項,配置項參考官方文檔。
object
配置 postcss
相關插件。
module.exports = {
// ...
mini: {
// ...
postcss: {
// 可以進行 autoprefixer 的配置。配置項參考官方文檔 https://github.com/postcss/autoprefixer
autoprefixer: {
enable: true,
config: {
// autoprefixer 配置項
}
},
pxtransform: {
enable: true,
config: {
// pxtransform 配置項,參考尺寸章節(jié)
selectorBlackList: ['body']
}
},
// 小程序端樣式引用本地資源內(nèi)聯(lián)
url: {
enable: true,
config: {
limit: 10240 // 設定轉換尺寸上限
}
},
// css modules 功能開關與相關配置
cssModules: {
enable: false, // 默認為 false,如需使用 css modules 功能,則設為 true
config: {
generateScopedName: '[name]__[local]___[hash:base64:5]'
}
}
}
}
}
array | function
用于告訴 Taro 編譯器需要抽取的公共文件,支持兩種配置方式。
commonChunks
的配置值必須依據(jù)于 webpack 配置 optimization.runtimeChunk 和 optimization.splitChunks 中的公共
chunks 的名稱。Taro 中 webpack.optimization 配置的默認值:源碼位置。
如果有自行拆分公共文件的需求,請先通過 webpackChain 配置 覆蓋
optimization.runtimeChunk
與optimization.splitChunks
配置。再通過此commonChunks
配置指定公共入口文件。
普通編譯時的默認值:['runtime', 'vendors', 'taro', 'common']
編譯為微信小程序插件時的默認值: ['plugin/runtime', 'plugin/vendors', 'plugin/taro', 'plugin/common']
可以傳入需要抽取的公共文件的名稱數(shù)組。
例子:
module.exports = {
// ...
mini: {
// ...
commonChunks: ['runtime', 'vendors', 'taro', 'common']
}
}
這幾個公共文件分別表示:
runtime
: webpack 運行時入口taro
: node_modules 中 Taro 相關依賴vendors
: node_modules 除 Taro 外的公共依賴common
: 項目中業(yè)務代碼公共邏輯通過對入?yún)⒌哪J公共文件數(shù)組進行操作,返回新的數(shù)組來進行配置,如下
module.exports = {
// ...
mini: {
// ...
commonChunks (commonChunks) {
// commonChunks 的取值即為默認的公共文件名數(shù)組
commonChunks.push('yourCustomCommonChunkName')
return commonChunks
}
}
}
function
為某些頁面單獨指定需要引用的公共文件。
例如在使用小程序分包的時候,為了減少主包大小,分包的頁面希望引入自己的公共文件,而不希望直接放在主包內(nèi)。那么我們首先可以通過 webpackChain 配置 來單獨抽離分包的公共文件,然后通過 mini.addChunkPages
為分包頁面配置引入分包的公共文件,其使用方式如下:
mini.addChunkPages
配置為一個函數(shù),接受兩個參數(shù)
pages
參數(shù)為 Map 類型,用于為頁面添加公共文件pagesNames
參數(shù)為當前應用的所有頁面標識列表,可以通過打印的方式進行查看頁面的標識例如,為 pages/index/index
頁面添加 eating
和 morning
兩個抽離的公共文件:
module.exports = {
// ...
mini: {
// ...
addChunkPages (pages: Map<string, string[]>, pagesNames: string[]) {
pages.set('pages/index/index', ['eating', 'morning'])
}
}
}
object
style-loader
的附加配置。配置項參考官方文檔,例如:
module.exports = {
// ...
mini: {
// ...
styleLoaderOption: {
insertAt: 'top'
}
}
}
object
css-loader
的附加配置。配置項參考官方文檔,例如:
module.exports = {
// ...
mini: {
// ...
cssLoaderOption: {
localIdentName: '[hash:base64]'
}
}
}
object
sass-loader
的附加配置。配置項參考官方文檔,例如:
module.exports = {
// ...
mini: {
// ...
sassLoaderOption: {
implementation: require("dart-sass")
}
}
}
object
less-loader
的附加配置。配置項參考官方文檔,例如:
module.exports = {
// ...
mini: {
// ...
lessLoaderOption: {
strictMath: true,
noIeCompat: true
}
}
}
object
stylus-loader
的附加配置。配置項參考官方文檔。
object
mini-css-extract-plugin
的附加配置,配置項參考官方文檔。
module.exports = {
// ...
mini: {
// ...
miniCssExtractPluginOption: {
filename: '[name].css',
chunkFilename: '[name].css'
}
}
}
object
針對 png | jpg | jpeg | gif | bpm | svg
文件的 url-loader
配置。配置項參考官方文檔。
object
針對 mp4 | webm | ogg | mp3 | wav | flac | aac
文件的 url-loader
配置。配置項參考官方文檔,例如:
module.exports = {
// ...
mini: {
// ...
mediaUrlLoaderOption: {
limit: 8192
}
}
}
object
針對 woff | woff2 | eot | ttf | otf
文件的 url-loader
配置。配置項參考官方文檔。
更多建議: