全国服务热线:4008-888-888

技术知识

KTV预订微信小程序_详解weex默认webpack.config.js改造

详解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内)

删除

删除getEntryFileContent函数 删除walk函数 删除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);

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




在线客服

关闭

客户服务热线
4008-888-888


点击这里给我发消息 在线客服

点击这里给我发消息 在线客服