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

解決的問題：

由于weex默認的webpack配置，會導致在src文件夾下的每一個.vue在temp文件夾下生成對應的一個.js文件，該js文件有一段這樣的代碼

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

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

默認的webpack.config.js文件中，有兩個方法

第一個 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; }

第二個 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);  } }); }

這兩個方法，是遍歷src中的.vue文件，然后在temp文件夾中生成一個相對應的JS文件

如果我們采用傳統的vue開發，需要一個入口.js文件，我們需要對這個配置進行改造

添加入口文件配置

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

刪除或者更改配置（當然，第三種方法還可以把.vue組件不寫在src內）