Detailed introduction to the transformation of webpack.config.js in weex-JS Tutorial-php.cn

Detailed introduction to the transformation of webpack.config.js in weex

亚连

Release： 2018-06-13 10:59:44

Original

1789 people have browsed it

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

本文介绍了weex默认webpack.config.js改造，分享给大家，具体如下：

解决的问题：

由于weex默认的webpack配置，会导致在src文件夹下的每一个.vue在temp文件夹下生成对应的一个.js文件，该js文件有一段这样的代码

contents += &#39;var App = require(\&#39;&#39; + relativePath + &#39;\&#39;)\n&#39;;
 contents += &#39;App.el = \&#39;#root\&#39;\n&#39;;
 contents += &#39;new Vue(App)\n&#39;;

Copy after login

会导致多个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 += &#39;var App = require(\&#39;&#39; + relativePath + &#39;\&#39;)\n&#39;;
 contents += &#39;App.el = \&#39;#root\&#39;\n&#39;;
 contents += &#39;new Vue(App)\n&#39;;
 return contents;
 }

Copy after login

第二个 walk

const walk = (dir) => {
 dir = dir || &#39;.&#39;;
 const directory = pathTo.join(__dirname, &#39;src&#39;, 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 === &#39;.vue&#39; || extname === &#39;.we&#39;) {
  if (!fileType) {
   fileType = extname;
  }
  if (fileType && extname !== fileType) {
   console.log(&#39;Error: This is not a good practice when you use ".we" and ".vue" togither!&#39;);
  }
  const name = pathTo.join(dir, pathTo.basename(file, extname));
  if (extname === &#39;.vue&#39;) {
   const entryFile = pathTo.join(vueWebTemp, dir, pathTo.basename(file, extname) + &#39;.js&#39;);
   fs.outputFileSync(pathTo.join(entryFile), getEntryFileContent(entryFile, fullpath));
   entry[name] = pathTo.join(__dirname, entryFile) + &#39;?entry=true&#39;;
  }
  weexEntry[name] = fullpath + &#39;?entry=true&#39;;
  } else if (stat.isDirectory() && file !== &#39;build&#39; && file !== &#39;include&#39;) {
  const subdir = pathTo.join(dir, file);
  walk(subdir);
  }
 });
 }

Copy after login

这两个方法，是遍历src中的.vue文件，然后在temp文件夹中生成一个相对应的JS文件

如果我们采用传统的vue开发，需要一个入口.js文件，我们需要对这个配置进行改造

添加入口文件配置

const entry = {index: pathTo.resolve(&#39;src&#39;, &#39;entry.js&#39;)};
const weexEntry = {index: pathTo.resolve(&#39;src&#39;, &#39;entry.js&#39;)};

Copy after login

删除或者更改配置（当然，第三种方法还可以把.vue组件不写在src内）

删除

删除getEntryFileContent函数
删除walk函数
删除walk() walk函数的调用

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

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

function walk(dir) {
 dir = dir || &#39;.&#39;;
 const directory = pathTo.join(__dirname, &#39;src&#39;, 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 === &#39;.vue&#39; && basename != &#39;App.vue&#39; ) {
  if (!fileType) {
   fileType = extname;
  }
  if (fileType && extname !== fileType) {
   console.log(&#39;Error: This is not a good practice when you use ".we" and ".vue" togither!&#39;);
  }
  const name = pathTo.join(dir, pathTo.basename(file, extname));
  if (extname === &#39;.vue&#39;) {
   const entryFile = pathTo.join(vueWebTemp, dir, pathTo.basename(file, extname) + &#39;.js&#39;);
   fs.outputFileSync(pathTo.join(entryFile), getEntryFileContent(entryFile, fullpath));
   entry[name] = pathTo.join(__dirname, entryFile) + &#39;?entry=true&#39;;
  }
   weexEntry[name] = fullpath + &#39;?entry=true&#39;;
  } else if (stat.isDirectory() && [&#39;build&#39;,&#39;include&#39;,&#39;assets&#39;,&#39;filters&#39;,&#39;mixins&#39;].indexOf(file) == -1 ) {
  const subdir = pathTo.join(dir, file);
  walk(subdir);
  }
 });
}

Copy after login

上面是我整理给大家的，希望今后会对大家有帮助。

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

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

在bootstrap+jquery中引入文件报错（详细教程）

The above is the detailed content of Detailed introduction to the transformation of webpack.config.js in weex. For more information, please follow other related articles on the PHP Chinese website!