免費(fèi)AI編程助手
編譯配置詳情
designWidth
designWidth 用來設(shè)置設(shè)計稿尺寸，關(guān)于這一部分的配置說明請見設(shè)計稿及尺寸單位這一章節(jié)。
sourceRoot
sourceRoot 用來設(shè)置源碼存放目錄，通過 Taro 開發(fā)工具初始化后的項(xiàng)目源碼目錄都是 src，你可以通過修改這一配置來重新指定源碼目錄。
outputRoot
outputRoot 用來設(shè)置代碼編譯后的生產(chǎn)目錄，通過 Taro 開發(fā)工具初始化后的生產(chǎn)目錄都是 dist，你可以通過修改這一配置來重新指定生產(chǎn)目錄。
plugins
plugins 用來設(shè)置編譯過程插件，插件機(jī)制基于 實(shí)現(xiàn)，目前暴露了兩個鉤子 beforeBuild 和 afterBuild
其中，beforeBuild 將在整體編譯前觸發(fā)，可以獲取到編譯的相關(guān)配置，同時也能進(jìn)行修改
afterBuild 將在 webpack 編譯完后執(zhí)行，可以獲取到編譯后的結(jié)果
具體使用方式如下：
首先定義一個插件
class BuildPlugin {
apply (builder) {
builder.hooks.beforeBuild.tap('BuildPlugin', (config) => {
console.log(config)
})
builder.hooks.afterBuild.tap('BuildPlugin', (stats) => {
console.log(stats)
})
}
}
接下來在 plugins 字段中進(jìn)行配置
{
plugins: [
new BuildPlugin()
]
}
babel
用來配置 babel，默認(rèn)配置如下，可以自行添加自己需要的額外的 presets 及 plugins。
babel: {
sourceMap: true,
presets: [
'env'
],
plugins: [
'transform-class-properties',
'transform-decorators-legacy',
'transform-object-rest-spread'
]
}
uglify
用來配置 UgligyJS 工具，設(shè)置打包過程中的 JS 代碼壓縮?？梢酝ㄟ^ uglify.enable 來設(shè)置是否開啟壓縮，若設(shè)置開啟，則可以通過 uglify.config 來設(shè)置 UgligyJS 的配置項(xiàng)，具體配置方式如下：
uglify: {
enable: true,
config: {
// 配置項(xiàng)同 https://github.com/mishoo/UglifyJS2#minify-options
}
}
csso
用來配置 csso 工具，設(shè)置打包過程中的 CSS 代碼壓縮。可以通過 csso.enable 來設(shè)置是否開啟壓縮，若設(shè)置開啟，則可以通過 csso.config 來設(shè)置 csso 的配置項(xiàng)，具體配置方式如下：
csso: {
enable: true,
config: {
// 配置項(xiàng)同 https://github.com/css/csso#minifysource-options
}
}
sass
用來配置 sass 工具，設(shè)置打包過程中的 SCSS 代碼編譯。具體配置可以參考node-sass當(dāng)需要全局注入scss文件時，可以添加三個額外參數(shù)：resource 、 projectDirectory (v1.2.25開始支持)、data（v1.3.0開始支持），具體配置方式如下：
單文件路徑形式
當(dāng)只有 resource 字段時，可以傳入 scss 文件的絕對路徑。
sass: {
resource: path.resolve(__dirname, '..', 'src/styles/variable.scss')
}
多文件路徑形式
此外，當(dāng)只有 resource 字段時，也可以傳入一個路徑數(shù)組。
sass: {
resource: [
path.resolve(__dirname, '..', 'src/styles/variable.scss'),
path.resolve(__dirname, '..', 'src/styles/mixins.scss')
]
}
指定項(xiàng)目根目錄路徑形式
你可以額外配置 projectDirectory 字段，這樣你就可以在 resource 里寫相對路徑了。
sass: {
resource: [
'src/styles/variable.scss',
'src/styles/mixins.scss'
],
projectDirectory: path.resolve(__dirname, '..')
}
傳入 scss 變量字符串
sass: {
resource: [
'src/styles/variable.scss',
'src/styles/mixins.scss'
],
projectDirectory: path.resolve(__dirname, '..'),
data: '$nav-height: 48px;'
}
- resource: 如果要引入多個文件，支持?jǐn)?shù)組形式傳入
- projectDirectory: 項(xiàng)目根目錄的絕對地址(若為小程序云開發(fā)模板，則應(yīng)該是client目錄)
- data: 全局 scss 變量，若 data 與 resource 中設(shè)置了同樣的變量，則 data 的優(yōu)先級高于 resource
env
用來設(shè)置一些環(huán)境變量如 process.env.NODE_ENV，例如我們想設(shè)置區(qū)分預(yù)覽、打包來做些不同的操作，可以如下配置：
在 config/dev.js 中：
env: {
NODE_ENV: '"development"' // JSON.stringify('development')
}
在 config/prod.js 中：
env: {
NODE_ENV: '"production"' // JSON.stringify('production')
}
這樣就能在代碼中通過 process.env.NODE_ENV === 'development' 來判斷環(huán)境。
defineConstants
用來配置一些全局變量供代碼中進(jìn)行使用，配置方式與 Webpack DefinePlugin 類似，例如：
defineConstants: {
A: JSON.stringify('a') // '"a"'
}
alias
1.2.0 開始支持。
用來配置目錄別名，從而方便書寫代碼引用路徑。例如，使用相對路徑書寫文件引用如下：
import A from '../../componnets/A'
import Utils from '../../utils'
import packageJson from '../../package.json'
import projectConfig from '../../project.config.json'
為了避免書寫多級相對路徑，我們可以如下配置 alias：
alias: {
'@/components': path.resolve(__dirname, '..', 'src/components'),
'@/utils': path.resolve(__dirname, '..', 'src/utils'),
'@/package': path.resolve(__dirname, '..', 'package.json'),
'@/project': path.resolve(__dirname, '..', 'project.config.json'),
}
通過上述配置，可以將 src/components 和 src/utils 目錄配置成別名，將根目錄下的 package.json 和 project.config.json 文件配置成別名，則代碼中的引用改寫如下：
import A from '@/components/A'
import Utils from '@/utils'
import packageJson from '@/package'
import projectConfig from '@/project'
為了讓編輯器（VS Code）不報錯，并繼續(xù)使用自動路徑補(bǔ)全的功能，需要在項(xiàng)目根目錄下的 jsconfig.json 或者 tsconfig.json 中配置 paths 讓編輯器認(rèn)得我們的別名，形式如下：
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/components/*": ["./src/components/*"],
"@/utils/*": ["./src/utils/*"],
"@/package": ["./package.json"],
"@/project": ["./project.config.json"],
}
}
}
建議別名使用 @/ 開頭而非僅用 @ 開頭，因?yàn)橛行「怕蕰c某些 scoped 形式的 npm 包（行如：@tarojs/taro, @babel/core）產(chǎn)生命名沖突。
copy
文件 copy 配置，包含兩個配置項(xiàng) patterns 和 options。
copy.patterns
用來指定需要拷貝的文件或者目錄，數(shù)組類型，每一項(xiàng)都必須包含 from 、to 的配置，分別代表來源和需要拷貝到的目錄，同時可以設(shè)置 ignore 配置來指定需要忽略的文件， ignore 是指定的 glob 類型字符串，或者 glob 字符串?dāng)?shù)組。
值得注意的是，目前 from 必須指定存在的文件或者目錄，暫不支持 glob 格式， from 和 to 直接置頂項(xiàng)目根目錄下的文件目錄，建議 from 以 src 目錄開頭，to 以 dist 目錄開頭。
一般有如下的使用形式：
copy: {
patterns: [
{ from: 'src/asset/tt/', to: 'dist/asset/tt/', ignore: '*.js' }, // 指定需要 copy 的目錄
{ from: 'src/asset/tt/sd.jpg', to: 'dist/asset/tt/sd.jpg' } // 指定需要 copy 的文件
]
},
copy.options
拷貝配置，目前可以指定全局的 ignore：
copy: {
options: {
ignore: ['*.js', '*.css'] // 全局的 ignore
}
}
mini
專屬于小程序的配置。
mini.compile
小程序編譯過程的相關(guān)配置。
mini.compile.exclude
配置小程序編譯過程中排除不需要經(jīng)過 Taro 編譯的文件，數(shù)組類型，數(shù)組里面可以包含具體文件路徑，也可以是判斷函數(shù)，同 Rule.exclude
例如，想要排除某個文件，可以如下配置要排除的文件具體路徑：
const config = {
mini: {
compile: {
exclude: [
path.resolve(__dirname, '..', 'src/pages/index/vod-wx-sdk-v2.js')
]
}
}
}
也可以配置判斷函數(shù)，如下
const config = {
mini: {
compile: {
exclude: [
function (modulePath) {
return modulePath.indexOf('vod-wx-sdk-v2') >= 0
}
]
}
}
}
mini.compile.incldue
配置額外需要經(jīng)過 Taro 編譯的文件，例如 Taro 默認(rèn)不編譯 node_modules 包中文件，可以通過這個配置讓 Taro 編譯 node_modules 包中文件，使用方式與 mini.compile.exclude 一致，同 Rule.include。
mini.webpackChain
自定義 Webpack 配置，接受函數(shù)形式的配置。
這個函數(shù)會收到三個參數(shù)，第一個參數(shù)是 webpackChain 對象，可參考 webpack-chain 的 api 進(jìn)行修改；第二個參數(shù)是 webpack 實(shí)例；第三個參數(shù) PARSE_AST_TYPE 是小程序編譯時的文件類型集合。例如：
// 這是一個添加 raw-loader 的例子，用于在項(xiàng)目中直接引用 md 文件
{
webpackChain (chain, webpack) {
chain.merge({
module: {
rules: {
myloader: {
test: /\.md$/,
use: [{
loader: 'raw-loader',
options: {}
}]
}
}
}
})
}
}
// 這是一個添加插件的例子
{
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'
}]
}
}
})
}
}
注意：第三個參數(shù)的取值如下
export enum PARSE_AST_TYPE {
ENTRY = 'ENTRY',
PAGE = 'PAGE',
COMPONENT = 'COMPONENT',
NORMAL = 'NORMAL',
STATIC = 'STATIC'
}
mini.commonChunks
type commonChunks = string[] | ((commonChunks: string[]) => string[])
配置打包時抽離的公共文件
支持兩種配置方式，其一是字符串?dāng)?shù)組，給定抽離公共文件名，在 Taro 編譯中，如果是普通編譯，則 commonChunks 默認(rèn)值為 ['runtime', 'vendors', 'taro', 'common']，如果是編譯為微信小程序插件，則 commonChunks 默認(rèn)值為 ['plugin/runtime', 'plugin/vendors', 'plugin/taro', 'plugin/common']，普通編譯時默認(rèn)配置
const config = {
mini: {
commonChunks: ['runtime', 'vendors', 'taro', 'common']
}
}
這幾個公共文件分別表示：
- runtime: webpack 運(yùn)行時入口
- vendors: node_modules 中文件抽離
- taro: node_modules 中 Taro 相關(guān)依賴抽離
- common: 項(xiàng)目中業(yè)務(wù)代碼公共文件抽離
其二是函數(shù)，通過對入?yún)⒌哪J(rèn)公共文件數(shù)組進(jìn)行操作，返回新的數(shù)組來進(jìn)行配置，如下
const config = {
mini: {
commonChunks (commonChunks) {
// commonChunks 的取值即為默認(rèn)的公共文件名數(shù)組
commonChunks.push('yourCustomCommonChunkName')
return commonChunks
}
}
}
commonChunks 的配置值主要依據(jù) webpack 配置 optimization.runtimeChunk 和 optimization.splitChunks，Taro 中默認(rèn)的配置分別為
optimization: {
runtimeChunk: {
name: 'runtime'
},
splitChunks: {
chunks: 'all',
maxInitialRequests: Infinity,
minSize: 0,
name: 'vendors',
cacheGroups: {
common: {
name: !!config.isBuildPlugin ? 'plugin/common' : 'common',
minChunks: 2,
priority: 1
},
vendors: {
name: !!config.isBuildPlugin ? 'plugin/vendors' : 'vendors',
minChunks: 2,
test: module => {
// 如果需要自定義配置，PARSE_AST_TYPE 可以從 webpackChain 第三個參數(shù)獲得
return /[\\/]node_modules[\\/]/.test(module.resource) && module.miniType !== PARSE_AST_TYPE.COMPONENT
},
priority: 10
},
taro: {
name: !!config.isBuildPlugin ? 'plugin/taro' : 'taro',
test: module => {
// buildAdapter 為當(dāng)前編譯的端，在配置文件中可以通過 process.env.TARO_ENV 來獲取
const taroBaseReg = new RegExp(`@tarojs[\\/]taro|@tarojs[\\/]${buildAdapter}`)
return taroBaseReg.test(module.context)
},
priority: 100
}
}
}
}
如果有自行拆分公共文件的需求，請先通過 webpackChain 配置覆蓋 optimization.runtimeChunk 與 optimization.splitChunks 配置，再通過 commonChunks 配置指定的公共入口文件。
mini.addChunkPages
2.0.5 開始支持 type addChunkPages = ((pages: Map, pagesNames?: string[]) => void)
在某些情況下，我們可能需要為某些頁面單獨(dú)指定需要引用的公共文件，例如，使用小程序分包的時候，為了減少主包大小，分包的頁面希望引入自己的公共文件，而不希望直接放在主包內(nèi)，那么我們首先可以通過配置 mini.webpackChain 來單獨(dú)抽離分包的公共文件，然后通過 mini.addChunkPages 為分包頁面配置引入子包公共文件，其使用方式如下：
mini.addChunkPages 配置為一個函數(shù)，接受兩個參數(shù)
- pages 參數(shù)為 Map 類型，用于為頁面添加公共文件
- pagesNames 參數(shù)為當(dāng)前應(yīng)用的所有頁面標(biāo)識列表，可以通過打印的方式進(jìn)行查看頁面的標(biāo)識
例如，為 pages/index/index 頁面添加 eating 和 morning 兩個抽離的公共文件
const config = {
mini: {
addChunkPages (pages, pagesNames) {
pages.set('pages/index/index', ['eating', 'morning'])
}
}
}
mini.cssLoaderOption
css-loader 的附加配置。配置項(xiàng)參考官方文檔，例如：
{
cssLoaderOption: {
localIdentName: '[hash:base64]'
}
}
mini.styleLoaderOption
style-loader 的附加配置。配置項(xiàng)參考官方文檔，例如：
{
styleLoaderOption: {
insertAt: 'top'
}
}
mini.sassLoaderOption
sass-loader 的附加配置。配置項(xiàng)參考官方文檔，例如：
{
sassLoaderOption: {
implementation: require("dart-sass")
}
}
mini.lessLoaderOption
less-loader 的附加配置。配置項(xiàng)參考官方文檔，例如：
{
lessLoaderOption: {
strictMath: true,
noIeCompat: true
}
}
mini.stylusLoaderOption
stylus-loader 的附加配置。配置項(xiàng)參考官方文檔。
mini.mediaUrlLoaderOption
針對 mp4 | webm | ogg | mp3 | wav | flac | aac 文件的 url-loader 配置。配置項(xiàng)參考官方文檔，例如：
{
mediaUrlLoaderOption: {
limit: 8192
}
}
mini.fontUrlLoaderOption
針對 woff | woff2 | eot | ttf | otf 文件的 url-loader 配置。配置項(xiàng)參考官方文檔。
mini.imageUrlLoaderOption
針對 png | jpg | jpeg | gif | bpm | svg 文件的 url-loader 配置。配置項(xiàng)參考官方文檔。
mini.miniCssExtractPluginOption
mini-css-extract-plugin 的附加配置，在 enableExtract 為 true 的情況下生效。 配置項(xiàng)參考官方文檔，例如：
{
miniCssExtractPluginOption: {
filename: '[name].css',
chunkFilename: '[name].css'
}
}
mini.postcss
配置 postcss 相關(guān)插件：
postcss: {
// 可以進(jìn)行 autoprefixer 的配置。配置項(xiàng)參考官方文檔 https://github.com/postcss/autoprefixer
autoprefixer: {
enable: true,
config: {
// autoprefixer 配置項(xiàng)
}
},
pxtransform: {
enable: true,
config: {
// pxtransform 配置項(xiàng)，參考尺寸章節(jié)
selectorBlackList: ['body']
}
},
// 小程序端樣式引用本地資源內(nèi)聯(lián)
url: {
enable: true,
config: {
limit: 10240 // 設(shè)定轉(zhuǎn)換尺寸上限
}
},
// css modules 功能開關(guān)與相關(guān)配置
cssModules: {
enable: false, // 默認(rèn)為 false，如需使用 css modules 功能，則設(shè)為 true
config: {
generateScopedName: '[name]__[local]___[hash:base64:5]'
}
}
}
h5
專屬于 H5 的配置。
h5.devServer
預(yù)覽服務(wù)的配置，可以更改端口等參數(shù)。具體配置參考 webpack-dev-server。
devServer: {
port: 10086
}
默認(rèn)是 http 服務(wù)，如果想開啟 https 服務(wù)需要做如下配置。
devServer: {
https: true
}
h5.output
輸出配置
output: {
filename: 'js/[name].[hash:8].js',
chunkFilename: 'js/[name].[chunkhash:8].js'
}
h5.publicPath
設(shè)置輸出解析文件的目錄。
h5.staticDirectory
h5 編譯后的靜態(tài)文件目錄。
h5.chunkDirectory
編譯后非 entry 的 js 文件的存放目錄，主要影響動態(tài)引入的 pages 的存放路徑。
h5.webpackChain
自定義 Webpack 配置，接受函數(shù)形式的配置。
這個函數(shù)會收到兩個參數(shù)，第一個參數(shù)是 webpackChain 對象，可參考 webpack-chain 的 api 進(jìn)行修改；第二個參數(shù)是 webpack 實(shí)例。例如：
// 這是一個添加 ts-loader 的例子，但事實(shí)上 taro 是默認(rèn)支持 ts 的，并不需要這樣做。
{
webpackChain (chain, webpack) {
chain.merge({
module: {
rule: {
myloader: {
test: /.tsx?/,
use: [{
loader: 'ts-loader',
options: {}
}]
}
}
}
})
}
}
// 這是一個添加插件的例子
{
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'
}]
}
}
})
}
}
h5.router
路由相關(guān)的配置，支持路由模式、路由基準(zhǔn)路徑以及自定義路由的配置。
h5.router.mode
路由模式配置。配置值為 hash（默認(rèn)值）或 browser，分別對應(yīng) hash 路由模式和瀏覽器 history 路由模式。例子：
h5: {
/* 其他配置 */
... ,
router: {
mode: 'hash' // 或者是 'browser'
}
}
針對上面的配置，調(diào)用 Taro.navigateTo({ url: '/pages/index/index' }) 后，瀏覽器地址欄將被變?yōu)?nbsp;http://{{domain}}/#/pages/index/index（hash 模式）或者 http://{{domain}}/pages/index/index（browser 模式）。
h5.router.basename
路由基準(zhǔn)路徑的配置，配置值為 string 類型。例子：
h5: {
/* 其他配置 */
... ,
router: {
basename: '/myapp'
}
}
針對上面的配置，調(diào)用 Taro.navigateTo({ url: '/pages/index/index' }) 后，瀏覽器地址欄將被變?yōu)?nbsp;http://{{domain}}/#/myapp/pages/index/index（hash 模式）或者 http://{{domain}}/myapp/pages/index/index（browser 模式）。
h5.router.customRoutes
自定義路由的配置，配置值為 { [key: string]: string } 類型。例子：
h5: {
/* 其他配置 */
... ,
router: {
customRoutes: {
'/pages/index/index': '/index'
}
}
}
針對上面的配置，調(diào)用 Taro.navigateTo({ url: '/pages/index/index' }) 后，瀏覽器地址欄將被變?yōu)?nbsp;http://{{domain}}/#/index（hash 模式）或者 http://{{domain}}/myapp/index（browser 模式）。
h5.entry
Taro app 的入口，同 webpack.entry。
{
entry: {
home: ['./home.js'],
about: ['./about.js'],
contact: ['./contact.js']
}
}
h5.enableSourceMap
sourceMap 開關(guān)，影響 js、css 的 sourceMap 配置。 dev 狀態(tài)默認(rèn) 開，prod 狀態(tài)默認(rèn) 關(guān)。
h5.sourceMapType
sourceMap格式, 默認(rèn)cheap-module-eval-source-map。具體配置
h5.enableExtract
extract 功能開關(guān)，開啟后將使用 mini-css-extract-plugin 分離 css 文件， 可通過 h5.miniCssExtractPluginOption 對插件進(jìn)行配置。 dev 狀態(tài)默認(rèn) 關(guān)，prod 狀態(tài)默認(rèn) 開。
h5.esnextModules
配置需要額外的編譯的源碼模塊，比如 taro-ui：
h5: {
// 經(jīng)過這一配置之后，代碼中引入的處于 `node_modules/taro-ui/` 路徑下的源碼文件均會經(jīng)過taro的編譯處理。
esnextModules: ['taro-ui'],
...
}
h5.cssLoaderOption
css-loader 的附加配置。配置項(xiàng)參考官方文檔，例如：
{
cssLoaderOption: {
localIdentName: '[hash:base64]'
}
}
h5.styleLoaderOption
style-loader 的附加配置。配置項(xiàng)參考官方文檔，例如：
{
styleLoaderOption: {
insertAt: 'top'
}
}
h5.sassLoaderOption
sass-loader 的附加配置。配置項(xiàng)參考官方文檔，例如：
{
sassLoaderOption: {
implementation: require("dart-sass")
}
}
h5.lessLoaderOption
less-loader 的附加配置。配置項(xiàng)參考官方文檔，例如：
{
lessLoaderOption: {
strictMath: true,
noIeCompat: true
}
}
h5.stylusLoaderOption
stylus-loader 的附加配置。配置項(xiàng)參考官方文檔。
h5.mediaUrlLoaderOption
針對 mp4 | webm | ogg | mp3 | wav | flac | aac 文件的 url-loader 配置。配置項(xiàng)參考官方文檔，例如：
{
mediaUrlLoaderOption: {
limit: 8192
}
}
h5.fontUrlLoaderOption
針對 woff | woff2 | eot | ttf | otf 文件的 url-loader 配置。配置項(xiàng)參考官方文檔。
h5.imageUrlLoaderOption
針對 png | jpg | jpeg | gif | bpm | svg 文件的 url-loader 配置。配置項(xiàng)參考官方文檔。
h5.miniCssExtractPluginOption
mini-css-extract-plugin 的附加配置，在 enableExtract 為 true 的情況下生效。 配置項(xiàng)參考官方文檔，例如：
{
miniCssExtractPluginOption: {
filename: 'css/[name].css',
chunkFilename: 'css/[id].css'
}
}
h5.postcss
配置 H5 的 postcss 插件。
h5.postcss.autoprefixer
可以進(jìn)行 autoprefixer 的配置。配置項(xiàng)參考官方文檔，例如：
postcss: {
autoprefixer: {
enable: true,
config: {
/* autoprefixer 配置項(xiàng) */
}
}
}
h5.postcss.pxtransform
可以進(jìn)行 pxtransform 的配置。配置項(xiàng)參考官方文檔，例如：
postcss: {
pxtransform: {
enable: true,
config: {
/* pxtransform 配置項(xiàng) */
}
}
}
h5.postcss.cssModules
可以進(jìn)行 H5 端 CSS Modules 配置，配置如下：
postcss: {
// css modules 功能開關(guān)與相關(guān)配置
cssModules: {
enable: false, // 默認(rèn)為 false，如需使用 css modules 功能，則設(shè)為 true
config: {
namingPattern: 'module',
generateScopedName: '[name]__[local]___[hash:base64:5]'
}
}
}
rn
專屬于 RN 的配置。
rn.appJSON
React Native 的 app.json 配置。
rn.compile
RN 編譯過程的相關(guān)配置。
rn.compile.exclude
配置 RN 編譯過程中排除不需要經(jīng)過 Taro 編譯的文件，數(shù)組類型，數(shù)組里面可以包含具體文件路徑，也可以是判斷函數(shù)，同 Rule.exclude
例如，想要排除某個文件，可以如下配置要排除的文件具體路徑：
const config = {
rn: {
compile: {
exclude: [
path.resolve(__dirname, '..', 'src/pages/index/vod-wx-sdk-v2.js')
]
}
}
}
也可以配置判斷函數(shù)，如下
const config = {
rn: {
compile: {
exclude: [
function (modulePath) {
return modulePath.indexOf('vod-wx-sdk-v2') >= 0
}
]
}
}
}
rn.compile.include
配置額外需要經(jīng)過 Taro 編譯的文件，例如 Taro 默認(rèn)不編譯 node_modules 包中文件，可以通過這個配置讓 Taro 編譯 node_modules 包中文件，使用方式與 rn.compile.exclude 一致，同 Rule.include。
mini.webpackChain
自定義 Webpack 配置，接受函數(shù)形式的配置。
這個函數(shù)會收到三個參數(shù)，第一個參數(shù)是 webpackChain 對象，可參考 webpack-chain 的 api 進(jìn)行修改；第二個參數(shù)是 webpack 實(shí)例；第三個參數(shù) PARSE_AST_TYPE 是小程序編譯時的文件類型集合。例如：
// 這是一個添加 raw-loader 的例子，用于在項(xiàng)目中直接引用 md 文件
{
webpackChain (chain, webpack) {
chain.merge({
module: {
rule: {
myloader: {
test: /\.md$/,
use: [{
loader: 'raw-loader',
options: {}
}]
}
}
}
})
}
}
// 這是一個添加插件的例子
{
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'
}]
}
}
})
}
}
注意：第三個參數(shù)的取值如下
export enum PARSE_AST_TYPE {
ENTRY = 'ENTRY',
PAGE = 'PAGE',
COMPONENT = 'COMPONENT',
NORMAL = 'NORMAL',
STATIC = 'STATIC'
}
mini.cssLoaderOption
css-loader 的附加配置。配置項(xiàng)參考官方文檔，例如：
{
cssLoaderOption: {
localIdentName: '[hash:base64]'
}
}
mini.styleLoaderOption
style-loader 的附加配置。配置項(xiàng)參考官方文檔，例如：
{
styleLoaderOption: {
insertAt: 'top'
}
}
mini.sassLoaderOption
sass-loader 的附加配置。配置項(xiàng)參考官方文檔，例如：
{
sassLoaderOption: {
implementation: require("dart-sass")
}
}
mini.lessLoaderOption
less-loader 的附加配置。配置項(xiàng)參考官方文檔，例如：
{
lessLoaderOption: {
strictMath: true,
noIeCompat: true
}
}
mini.stylusLoaderOption
stylus-loader 的附加配置。配置項(xiàng)參考官方文檔。
mini.mediaUrlLoaderOption
針對 mp4 | webm | ogg | mp3 | wav | flac | aac 文件的 url-loader 配置。配置項(xiàng)參考官方文檔，例如：
{
mediaUrlLoaderOption: {
limit: 8192
}
}
mini.fontUrlLoaderOption
針對 woff | woff2 | eot | ttf | otf 文件的 url-loader 配置。配置項(xiàng)參考官方文檔。
mini.imageUrlLoaderOption
針對 png | jpg | jpeg | gif | bpm | svg 文件的 url-loader 配置。配置項(xiàng)參考官方文檔。
mini.miniCssExtractPluginOption
mini-css-extract-plugin 的附加配置，在 enableExtract 為 true 的情況下生效。 配置項(xiàng)參考官方文檔，例如：
{
miniCssExtractPluginOption: {
filename: '[name].css',
chunkFilename: '[name].css'
}
}
mini.postcss
配置 postcss 相關(guān)插件：
postcss: {
// 可以進(jìn)行 autoprefixer 的配置。配置項(xiàng)參考官方文檔 https://github.com/postcss/autoprefixer
autoprefixer: {
enable: true,
config: {
// autoprefixer 配置項(xiàng)
}
},
pxtransform: {
enable: true,
config: {
// pxtransform 配置項(xiàng)，參考尺寸章節(jié)
selectorBlackList: ['body']
}
},
// 小程序端樣式引用本地資源內(nèi)聯(lián)
url: {
enable: true,
config: {
limit: 10240 // 設(shè)定轉(zhuǎn)換尺寸上限
}
},
// css modules 功能開關(guān)與相關(guān)配置
cssModules: {
enable: false, // 默認(rèn)為 false，如需使用 css modules 功能，則設(shè)為 true
config: {
generateScopedName: '[name]__[local]___[hash:base64:5]'
}
}
}
更多建議：