开启辅助访问 充值VIP充值豆豆
QQ登录 自动登录 注册 找回密码
小白基地 行业资讯 javaScript教程 查看内容

详细介绍有关weex中的webpack.config.js改造

2018-12-4 15:28| 发布者: 从前有座山| 查看: 637| 评论: 0|原作者: adminm|来自: 小白基地

摘要: 本篇文章主要介绍了详解weex默认webpack.config.js改造,现在分享给大家,也给大家做个参考。
本篇文章主要介绍了详解weex默认webpack.config.js改造,现在分享给大家,也给大家做个参考。

本文介绍了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); } }); }上面是我整理给大家的,希望今后会对大家有帮助。

相关文章:

使用vue+vuex+koa2如何搭建开发环境

使用jquery+ajaxform+springboot如何实现数据更新

在bootstrap+jquery中引入文件报错(详细教程)以上就是详细介绍有关weex中的webpack.config.js改造的详细内容,更多请关注php中文网其它相关文章!


鲜花

握手

雷人

路过

鸡蛋

本站资源全部来自网络和网友分享,如有侵犯您的权益,请联系网站QQ,或发邮件至sibida@foxmail.com。本网站尊重知识产权,无意侵犯知识产品,如有,联系网站人员,会第一时间删除!

小白基地,是小白资源网的官方网站,思必达学院官网,提供最新的创业技术支持与创业资讯,提供最新的思必达教程。是IT小白网友学习资源分享基地,中国互助创业资源网。提供诸如JAVA、PHP、MySQL、ASP、C语言等各类程序开发的教程资源。

返回顶部
鞋子货源 服装货源一件代发 美容护肤品货源