中文字幕av专区_日韩电影在线播放_精品国产精品久久一区免费式_av在线免费观看网站

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

使用webpack4怎么開發小程序

發布時間:2021-06-01 18:25:01 來源:億速云 閱讀:214 作者:Leah 欄目:web開發

這篇文章給大家介紹使用webpack4怎么開發小程序,內容非常詳細,感興趣的小伙伴們可以參考借鑒,希望對大家能有所幫助。

思路

對等編譯輸出小程序項目的所有文件(嚴格按照小程序需要的文件及目錄結構輸出)。js/wxs通過babel編譯輸出,wxml/json直接輸出,wxss通過stylus編譯輸出(我們使用stylus開發樣式),順帶使用webpack抽離公共模塊文件common.js,并將runtime運行時抽離作為一個獨立文件。這樣既精簡了代碼,又享用到了webpack為我們帶來的好處。嗯,看上去很簡單嘛,實際上卻是踩了不少的坑!腳上的繭老厚了~~~

webpack module配置

module: {
 rules: [
  {
   test: /\.(wxml|axml)/, // 為支付寶小程序留了個伏筆,哈哈
   use: [
    relativeFileLoader(isWechat ? 'wxml' : 'axml'), // 這里使用file-loader簡單封裝了一下
    'extract-loader',
    'html-loader'
   ]
  },
  {
   test: /\.(jp(e?)g|png|gif)$/,
   use: relativeFileLoader()
  },
  {
   test: /\.wxss$/,
   include: SRC,
   use: relativeFileLoader(),
  },
  {
   test: /\.wxs$/,
   include: SRC,
   exclude: /node_modules/,
   use: [
    relativeFileLoader(),
    {
     loader: 'babel-loader',
     options: {
      babelrc: false,
      presets: [
       'es2015', 
       'stage-0'
      ]
     },
    }
   ]
  },
  {
   test: /\.js$/,
   use: {
    loader: 'happypack/loader',
    options: {
     id: 'babel'
    }
   },
   exclude: /node_modules/,
  },
  {
   test: /\.styl$/,
   include: SRC,
   use: [
    relativeFileLoader(isWechat ? 'wxss' : 'acss'),
    'stylus-loader'
   ]
  }
 ]
},

熟悉webpack的同學通過上面的moudle配置應該能夠看出資源文件編譯的思路,當然直接這樣配置肯定做不到正確編譯,還有一些坑需要踩

全文件entry

為了對等輸出,我們需要把所有文件整理為entry給webpack處理,這樣的好處是js能夠使用npm包,所有文件都能夠支持熱更新機制(webpack的熱更新響應非常快,gulp的熱更新很難精細控制,當項目足夠大的時候,響應很慢)

function entries(dir) {
 var jsFiles = {}
 let _partten = /[\/|\\][_](\w)+/;
 let re_common = /(.*)\/common\//
 const accessExts = ['.wxml', '.wxss', '.styl', '.wxs', '.json', '.png', '.jpg', '.jpeg', '.gif']
 if (fse.existsSync(dir)) {
  globby.sync([`${dir}/**/*`, `!${dir}/js/**/cloudfunctions`, '!node_modules', `!${dir}/dist`]).forEach(function (item) {
   if (!re_common.test(item)) {
    if (!_partten.test(item)) {
     const fileObj = path.parse(item)
     const xcxSrc = path.join(dir, 'js')
     if (~item.indexOf(xcxSrc)) {
      const fileStat = fs.statSync(item)
      const relativeFile = item.replace(xcxSrc, '')
      let relativeKey = relativeFile.replace(fileObj.ext, '').substring(1)
      if (fileObj.ext == '.js') {
       jsFiles[relativeKey] = item
      }
      else {
       if (accessExts.indexOf(fileObj.ext) > -1) {
        jsFiles['nobuild__' + relativeFile] = item
       }
      }
     }
    }
   }
  })
 }
 return jsFiles
}

上述是entry的生成代碼,涵蓋了小程序目錄結構下的所有需要的文件,并加上了一些特定的標識,以便于后續文件編譯輸出

非JS文件的輸出

在entry方法中我們將wxml,wxss等文件作為entry統統灌給webpack去處理,正常我們使用webpack時是不會把非js文件作為entry輸給webpack的。你猜webpack會報錯嗎,----- 哈哈,報錯就講不下去了,webpack會傻傻的把每個entry文件都當做js來對待,并且正常輸出,*.wxml.js,等等,這是什么鬼,我并不需要這樣的東東。加個插件來處理一下

compiler.hooks.compilation.tap('wpConcatFile', (compilation, params) => {
 compilation.hooks.beforeChunkAssets.tap('wpConcatFile', () => {
  compilation.chunks = compilation.chunks.filter(function (item) {
   return item.name.indexOf('nobuild__') == -1
  })
 })
 ...
 ...
}

nobuild__是在生成entry代碼是給非js文件加上的prefix前綴,在插件中我們排除掉非js,將正常的js文件重新chunk,js文件就能夠正常的輸出了,那么那些非js文件呢?webpack并不會編譯生成它們,中途它們就會被module中的xx-loader處理完,然后被file-loader給甩出去了。

全局變量替換

將全局變量替換為微信小程序的wx,我們通過插件解決

const globalVar = 'wx'
...
...
...
let contentObj = compilation.assets[file]
let code = contentObj.source()
code = code.replace(windowRegExp, that.globalVar);
contentObj = new RawSource(code)

compilation.assets[file] = new ConcatSource(
 contentSource,
 '\n',
 '\/**auto import common&runtime js**\/',
 '\n',
 contentObj,
);

通過上述代碼不難看出,我們讀取了每個文件的源碼,并將全局變量window/global替換為wx,再進行源碼重組。

運行時文件引入

我們需要引入runtime.js和common.js文件,runtime運行環境是webpack為每個編譯文件插入的用于解析define, require, module等等這些的文件引入方法,為了精簡文件,我們將之抽離為runtime.js,common.js為我們抽離出來的公共模塊文件。在web/h6下引入這些資源是不是so easy,但你還記得我們是在小程序環境下嘛,并不能通過<script>標簽來引入資源文件啊啊啊,你會不會猛拍腦門,一下就慌了(哈哈)。老辦法,我們通過插件解決

const lens = []
let posixPath = ''
const matchIt = chunk.name.match(/\//g)
if (matchIt) {
 matchIt.forEach(it => lens.push(this.prePath))
 // posixPath = './'+lens.join('')
 posixPath = lens.join('')
} else {
 posixPath = './'
}
let posixPathFile = posixPath + 'runtime.js'
let contentSource = this.contentSource.replace('~~~~', posixPathFile)
if (chunk.name.indexOf('runtime') > -1) {
 posixPathFile = posixPath + 'common.js'
 if (hasCommon) {
  contentSource = this.contentSource.replace('~~~~', posixPathFile)
 } else {
  contentSource = ''
 }
}

關于使用webpack4怎么開發小程序就分享到這里了,希望以上內容可以對大家有一定的幫助,可以學到更多知識。如果覺得文章不錯,可以把它分享出去讓更多的人看到。

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

利川市| 南昌县| 延津县| 乐都县| 静宁县| 汶上县| 石景山区| 哈密市| 沂源县| 星座| 武宁县| 凉山| 广德县| 益阳市| 托克逊县| 孙吴县| 车致| 岳阳县| 年辖:市辖区| 华坪县| 贵州省| 江达县| 武邑县| 巨鹿县| 库尔勒市| 武功县| 广水市| 资源县| 平原县| 右玉县| 晋宁县| 蒙阴县| 阿图什市| 宜都市| 分宜县| 夏津县| 化德县| 汤原县| 女性| 株洲市| 华宁县|