1.taro使用詳情請(qǐng)參考本https://nervjs.github.io/taro/docs搭建

2.關(guān)于文件的配置,在config/index.js添加相關(guān)配置

使得pages下面對(duì)應(yīng)的文件夾可以使用對(duì)應(yīng)的文件名而不是index.js,例如home.js

使得src下面的文件引用可以采用'@utils/jump'的引用方式(包括action,reducer,utils,styles等文件夾下的文件引用)

const path = require('path')

const sassImportor = function(url) {

const reg = /^@styles\/(.*)/

return {

file: reg.test(url) ? path.resolve(__dirname, '..', 'src/styles', url.match(reg)[1]) : url

}

}

const config = {

projectName: 'gant-taro',

date: '2019-2-26',

designWidth: 750,

deviceRatio: {

'640': 2.34 / 2,

'750': 1,

'828': 1.81 / 2

},

sourceRoot: 'src',

outputRoot: 'dist',

plugins: {

babel: {

sourceMap: true,

presets: [

['env', {

modules: false

}]

],

plugins: [

'transform-decorators-legacy',

'transform-class-properties',

'transform-object-rest-spread'

]

},

sass: {

importer: sassImportor

}

},

defineConstants: {

},

alias: {

'@actions': path.resolve(__dirname, '..', 'src/actions'),

'@assets': path.resolve(__dirname, '..', 'src/assets'),

'@components': path.resolve(__dirname, '..', 'src/components'),

'@constants': path.resolve(__dirname, '..', 'src/constants'),

'@reducers': path.resolve(__dirname, '..', 'src/reducers'),

'@styles': path.resolve(__dirname, '..', 'src/styles'),

'@utils': path.resolve(__dirname, '..', 'src/utils')

},

copy: {

patterns: [

],

options: {

}

},

weapp: {

module: {

postcss: {

autoprefixer: {

enable: true,

config: {

browsers: [

'last 3 versions',

'Android >= 4.1',

'ios >= 8'

]

}

},

pxtransform: {

enable: true,

config: {

}

},

url: {

enable: true,

config: {

limit: 10240 // 設(shè)定轉(zhuǎn)換尺寸上限

}

},

cssModules: {

enable: false, // 默認(rèn)為 false，如需使用 css modules 功能，則設(shè)為 true

config: {

namingPattern: 'module', // 轉(zhuǎn)換模式，取值為 global/module

generateScopedName: '[name]__[local]___[hash:base64:5]'

}

}

}

}

},

h5: {

publicPath: '/',

staticDirectory: 'static',

output: {

filename: 'js/[name].[hash].js',

chunkFilename: 'js/[name].[chunkhash].js'

},

imageUrlLoaderOption: {

limit: 5000,

name: 'static/images/[name].[hash].[ext]'

},

miniCssExtractPluginOption: {

filename: 'css/[name].[hash].css',

chunkFilename: 'css/[name].[chunkhash].css',

},

module: {

postcss: {

autoprefixer: {

enable: true,

config: {

browsers: [

'last 3 versions',

'Android >= 4.1',

'ios >= 8'

]

}

},

cssModules: {

enable: false, // 默認(rèn)為 false，如需使用 css modules 功能，則設(shè)為 true

config: {

namingPattern: 'module', // 轉(zhuǎn)換模式，取值為 global/module

generateScopedName: '[name]__[local]___[hash:base64:5]'

}

}

}

},

sassLoaderOption: {

importer: sassImportor

}

}

}

module.exports = function (merge) {

if (process.env.NODE_ENV === 'development') {

return merge({}, config, require('./dev'))

}

return merge({}, config, require('./prod'))

}

3.由于antd只以h5和rn為端應(yīng)用，taro面向的還有微信 支付寶 頭條等等 ，所以說taro提供了taro-ui這個(gè)統(tǒng)一框架

詳情請(qǐng)參考https://taro-ui.aotu.io/#/docs/introduction

作者：有風(fēng)吹是幸福的

鏈接：https://www.jianshu.com/p/cbd78616c0a9

來源：簡(jiǎn)書

簡(jiǎn)書著作權(quán)歸作者所有，任何形式的轉(zhuǎn)載都請(qǐng)聯(lián)系作者獲得授權(quán)并注明出處。

總結(jié)

以上是生活随笔為你收集整理的h5有缓存css,taro H5配置 cdn css js 缓存 hash 配置的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。