详解weex默认webpack.config.js改造
本文介绍了weex默认webpack.config.js改造，分享给大家，具体如下：
解决的问题：
由于weex默认的webpack配置，会导致在src文件夹下的每一个.vue在temp文件夹下生成对应的一个.js文件，该js文件有一段这样的代码
contents+='varApp=require(\''+relativePath+'\')\n'; contents+='App.el=\'#root\'\n'; contents+='newVue(App)\n';
会导致多个vue对象挂载同一个id（#root），导致整个页面就只有一个vue对象，无法像写spa项目一样写weex项目，因此在这里对webpack.cofig进行改造（添加一个entry.js入口js文件，和一个最外层的App.vue承载路由渲染）
默认的webpack.config.js文件中，有两个方法
第一个getEntryFileContent
constgetEntryFileContent=(entryPath,vueFilePath)=>{
letrelativePath=pathTo.relative(pathTo.join(entryPath,'../'),vueFilePath);
letcontents='';
/**
*Theplugin'slogiccurrentlyonlysupportsthe.weversion
*whichwillbesupportedlaterin.vue
*/
if(hasPluginInstalled){
constplugindir=pathTo.resolve('./web/plugin.js');
contents='require(\''+plugindir+'\')\n';
}
if(isWin){
relativePath=relativePath.replace(/\\/g,'\\\\');
}
contents+='varApp=require(\''+relativePath+'\')\n';
contents+='App.el=\'#root\'\n';
contents+='newVue(App)\n';
returncontents;
}
第二个walk
constwalk=(dir)=>{
dir=dir||'.';
constdirectory=pathTo.join(__dirname,'src',dir);
fs.readdirSync(directory).forEach((file)=>{
constfullpath=pathTo.join(directory,file);
conststat=fs.statSync(fullpath);
constextname=pathTo.extname(fullpath);
if(stat.isFile()&&extname==='.vue'||extname==='.we'){
if(!fileType){
fileType=extname;
}
if(fileType&&extname!==fileType){
console.log('Error:Thisisnotagoodpracticewhenyouuse".we"and".vue"togither!');
}
constname=pathTo.join(dir,pathTo.basename(file,extname));
if(extname==='.vue'){
constentryFile=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';
}elseif(stat.isDirectory()&&file!=='build'&&file!=='include'){
constsubdir=pathTo.join(dir,file);
walk(subdir);
}
});
}
这两个方法，是遍历src中的.vue文件，然后在temp文件夹中生成一个相对应的JS文件
如果我们采用传统的vue开发，需要一个入口.js文件，我们需要对这个配置进行改造
添加入口文件配置
constentry={index:pathTo.resolve('src','entry.js')};
constweexEntry={index:pathTo.resolve('src','entry.js')};
删除或者更改配置（当然，第三种方法还可以把.vue组件不写在src内）
删除
- 删除getEntryFileContent函数
- 删除walk函数
- 删除walk()walk函数的调用
修改（代码来自github上高仿网易严选项目）
注意看最外层的if判断，添加了额外条件如果是文件且后缀是.vue且不是App.vue的，则进入判断。否则，判断是不是page文件夹，如果不是，则结束。
functionwalk(dir){
dir=dir||'.';
constdirectory=pathTo.join(__dirname,'src',dir);
fs.readdirSync(directory)
.forEach((file)=>{
constfullpath=pathTo.join(directory,file);
conststat=fs.statSync(fullpath);
constextname=pathTo.extname(fullpath);
constbasename=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:Thisisnotagoodpracticewhenyouuse".we"and".vue"togither!');
}
constname=pathTo.join(dir,pathTo.basename(file,extname));
if(extname==='.vue'){
constentryFile=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';
}elseif(stat.isDirectory()&&['build','include','assets','filters','mixins'].indexOf(file)==-1){
constsubdir=pathTo.join(dir,file);
walk(subdir);
}
});
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。