Giraffe's Blog

Weex-toolkit build with VueRouter

As same as a Vue project, we also need an entry file to build the web pages for the weex project. If we want to use the VueRouter in our project, we also need to create a router config file.

Web Building with VueRouter

common configs for web

In webpack.common.conf.js, Weex-toolkit creates an entry file in .temp/ directory for web pages, as well as the router config file.

// .temp/entry.js
const entryFile = path.join(vueWebTemp, config.entryFilePath)
// .temp/router.js
const routerFile = path.join(vueWebTemp, config.routerFilePath)
// generate .temp/entry.js base on src/entry.js
fs.outputFileSync(entryFile, getEntryFileContent(helper.root(config.entryFilePath), routerFile));
// generate router.js
fs.outputFileSync(routerFile, getRouterFileContent(helper.root(config.routerFilePath)));

The function getEntryFileContent generates entry.js for the web building:

const getEntryFileContent = (source, routerpath) => {
// import the vue and weex-vue-render for entry.js
  let dependence = `import Vue from 'vue'\n`;
  dependence += `import weex from 'weex-vue-render'\n`;
  // the plugins are defined in 'plugins/plugins.js'
  let relativePluginPath = helper.rootNode(config.pluginFilePath);
  // read the content of entry.js, if developers define it.
  let entryContents = fs.readFileSync(source).toString();
  let contents = '';
  entryContents = dependence + entryContents;
  // init weex before the mark 'weex initialized'
  entryContents = entryContents.replace(/\/\* weex initialized/, match => `weex.init(Vue)\n${match}`);
  if (isWin) {
    relativePluginPath = relativePluginPath.replace(/\\/g, '\\\\');
  }
  // if plugins are defined in the plugins.js
  if (hasPluginInstalled) {
    contents += `\n// If detact plugins/plugin.js is exist, import and the plugin.js\n`;
    contents += `import plugins from '${relativePluginPath}';\n`;
    contents += `plugins.forEach(function (plugin) {\n\tweex.install(plugin)\n});\n\n`;
    entryContents = entryContents.replace(/\.\/router/, routerpath);
    entryContents = entryContents.replace(/weex\.init/, match => `${contents}${match}`);
  }
  return entryContents;
}

webConfig is the config object for compile jsbundle for web:

// the entry config
entry: Object.assign(webEntry, {
  'vendor': [path.resolve('node_modules/phantom-limb/index.js')]
}),
//  the compiled jsbundle is in `./dist`
output: {
  path: helper.rootNode('./dist'),
  filename: '[name].web.js'
},
// the resolve options change how modules are resolved
resolve: {
// Automatically resolve certain extensions. 
  extensions: ['.js', '.vue', '.json'],
  alias: {
    '@': helper.resolve('src')
  }
},

release configs with VueRouter

The file webpack.release.conf.js is the webpack configuration for the release version of web bundle. It merges the common configuration mentioned above.

Compared with common configs, the release config file and adds some additional plugins to the compiler:

plugins: [
    // create global ENV constant which can be used in compile time to compress the js files
    new webpack.DefinePlugin({
      'process.env': {
        'NODE_ENV': config.prod.env
      }
    }),
    // Javascript won't be executed until the html file is parsed
    new ScriptExtHtmlWebpackPlugin({
      defaultAttribute: 'defer'
    }),
    new UglifyJsparallelPlugin({
      workers: os.cpus().length,
      mangle: true,
      compressor: {
        warnings: false,
        drop_console: true,
        drop_debugger: true
      }
    }),
    // Simplifies creation of HTML files to serve your webpack bundles
    new HtmlWebpackPlugin({
      template: 'web/index.html',
      chunksSortMode: 'dependency',// changes how chunks are sorted 
      inject: 'head' // inject the js link to html header
    }),
    // create html file for entrys
    ...generateMultipleEntrys(commonConfig[0].entry),
]

The outputs of the command npm run build:prod:web in the dir release/web;

weex building with VueRouter

With VueRouter, the compile configures for Weex is much simpler. In webpack.common.conf.js, single entry file and output file is defined:

const weexEntry = {
  'index': helper.root('entry.js')
}

entry: weexEntry,
output: {
    path: path.join(__dirname, '../dist'),
    filename: '[name].js'
},

The webpack.prod.conf.js file only adds a "uglify" plugin for production env.