欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

详解weex默认webpack.config.js改造

程序员文章站 2022-04-28 09:13:53
本文介绍了weex默认webpack.config.js改造,分享给大家,具体如下: 解决的问题: 由于weex默认的webpack配置,会导致在src文件夹下的每一个...

本文介绍了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内)

删除

  1. 删除getentryfilecontent函数
  2. 删除walk函数
  3. 删除walk() walk函数的调用

修改(代码来自github上高仿网易严选项目)

注意看最外层的if判断,添加了额外条件 如果是文件且后缀是.vue且不是app.vue的,则进入判断。否则,判断是不是page文件夹,如果不是,则结束。

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);
  }
 });
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。