本文介绍了weex默认webpack.config.js改造，分享给大家，具体如下：
解决的问题：
由于weex默认的webpack配置，会导致在src文件夹下的每一个.vue在temp文件夹下生成对应的一个.js文件，该js文件有一段这样的代码
rush: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承载路由渲染）
第一个 getEntryFileContent
{
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
{
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,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文件，我们需要对这个配置进行改造
rush:js;">
const entry = {index: pathTo.resolve('src','entry.js')};
const weexEntry = {index: pathTo.resolve('src','entry.js')};
删除或者更改配置（当然，第三种方法还可以把.vue组件不写在src内）
注意看最外层的if判断，添加了额外条件 如果是文件且后缀是.vue且不是App.vue的，则进入判断。否则，判断是不是page文件夹，如果不是，则结束。
{
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,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);
}
});
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
