快捷導(dǎo)航

詳解weex默認(rèn)webpack.config.js改造

更新時(shí)間：2018年01月08日 10:21:03 作者：虛光

本篇文章主要介紹了詳解weex默認(rèn)webpack.config.js改造，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

本文介紹了weex默認(rèn)webpack.config.js改造，分享給大家，具體如下：

解決的問題：

由于weex默認(rèn)的webpack配置，會(huì)導(dǎo)致在src文件夾下的每一個(gè).vue在temp文件夾下生成對(duì)應(yīng)的一個(gè).js文件，該js文件有一段這樣的代碼

contents += 'var App = require(\'' + relativePath + '\')\n';
 contents += 'App.el = \'#root\'\n';
 contents += 'new Vue(App)\n';

會(huì)導(dǎo)致多個(gè)vue對(duì)象掛載同一個(gè)id（#root），導(dǎo)致整個(gè)頁面就只有一個(gè)vue對(duì)象，無法像寫spa項(xiàng)目一樣寫weex項(xiàng)目，因此在這里對(duì)webpack.cofig進(jìn)行改造（添加一個(gè)entry.js入口js文件，和一個(gè)最外層的App.vue承載路由渲染）

默認(rèn)的webpack.config.js文件中，有兩個(gè)方法

第一個(gè) getEntryFileContent

const getEntryFileContent = (entryPath, vueFilePath) => {
 let relativePath = pathTo.relative(pathTo.join(entryPath, '../'), vueFilePath);
 let contents = '';
 /**
  * The plugin's logic currently only supports the .we version
  * which will be supported later in .vue
  */
 if (hasPluginInstalled) {
  const plugindir = pathTo.resolve('./web/plugin.js');
  contents = 'require(\'' + plugindir + '\') \n';
 }
 if (isWin) {
  relativePath = relativePath.replace(/\\/g, '\\\\');
 }
 contents += 'var App = require(\'' + relativePath + '\')\n';
 contents += 'App.el = \'#root\'\n';
 contents += 'new Vue(App)\n';
 return contents;
 }

第二個(gè) walk

const walk = (dir) => {
 dir = dir || '.';
 const directory = pathTo.join(__dirname, 'src', dir);
 fs.readdirSync(directory).forEach((file) => {
  const fullpath = pathTo.join(directory, file);
  const stat = fs.statSync(fullpath);
  const extname = pathTo.extname(fullpath);
  if (stat.isFile() && extname === '.vue' || extname === '.we') {
  if (!fileType) {
   fileType = extname;
  }
  if (fileType && extname !== fileType) {
   console.log('Error: This is not a good practice when you use ".we" and ".vue" togither!');
  }
  const name = pathTo.join(dir, pathTo.basename(file, extname));
  if (extname === '.vue') {
   const entryFile = pathTo.join(vueWebTemp, dir, pathTo.basename(file, extname) + '.js');
   fs.outputFileSync(pathTo.join(entryFile), getEntryFileContent(entryFile, fullpath));
   entry[name] = pathTo.join(__dirname, entryFile) + '?entry=true';
  }
  weexEntry[name] = fullpath + '?entry=true';
  } else if (stat.isDirectory() && file !== 'build' && file !== 'include') {
  const subdir = pathTo.join(dir, file);
  walk(subdir);
  }
 });
 }

這兩個(gè)方法，是遍歷src中的.vue文件，然后在temp文件夾中生成一個(gè)相對(duì)應(yīng)的JS文件

如果我們采用傳統(tǒng)的vue開發(fā)，需要一個(gè)入口.js文件，我們需要對(duì)這個(gè)配置進(jìn)行改造

添加入口文件配置

const entry = {index: pathTo.resolve('src', 'entry.js')};
const weexEntry = {index: pathTo.resolve('src', 'entry.js')};

刪除或者更改配置（當(dāng)然，第三種方法還可以把.vue組件不寫在src內(nèi)）

刪除

刪除getEntryFileContent函數(shù)
刪除walk函數(shù)
刪除walk() walk函數(shù)的調(diào)用

修改（代碼來自github上高仿網(wǎng)易嚴(yán)選項(xiàng)目）

注意看最外層的if判斷，添加了額外條件如果是文件且后綴是.vue且不是App.vue的，則進(jìn)入判斷。否則，判斷是不是page文件夾，如果不是，則結(jié)束。

function walk(dir) {
 dir = dir || '.';
 const directory = pathTo.join(__dirname, 'src', dir);
 fs.readdirSync(directory)
 .forEach((file) => {
  const fullpath = pathTo.join(directory, file);
  const stat = fs.statSync(fullpath);
  const extname = pathTo.extname(fullpath);
  const basename = pathTo.basename(fullpath);
  console.log("配置",file,fullpath,stat,extname,basename,)
  if (stat.isFile() && extname === '.vue' && basename != 'App.vue' ) {
  if (!fileType) {
   fileType = extname;
  }
  if (fileType && extname !== fileType) {
   console.log('Error: This is not a good practice when you use ".we" and ".vue" togither!');
  }
  const name = pathTo.join(dir, pathTo.basename(file, extname));
  if (extname === '.vue') {
   const entryFile = pathTo.join(vueWebTemp, dir, pathTo.basename(file, extname) + '.js');
   fs.outputFileSync(pathTo.join(entryFile), getEntryFileContent(entryFile, fullpath));
   entry[name] = pathTo.join(__dirname, entryFile) + '?entry=true';
  }
   weexEntry[name] = fullpath + '?entry=true';
  } else if (stat.isDirectory() && ['build','include','assets','filters','mixins'].indexOf(file) == -1 ) {
  const subdir = pathTo.join(dir, file);
  walk(subdir);
  }
 });
}

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: