This is a scaffold for building a SPA. If you look at the build project, you can see that it outputs all the modules into a build.js file. Sometimes you can see that the JS file is very large, several megabytes, but when a project is complex enough, I am afraid that SPA is no longer suitable for use. It is impossible for users to download a file of several megabytes when visiting your web page. Especially for mobile phone users, users may only read one article in the website, which will also lead to slow web page loading, which is not desirable. So break your site up into modules. Hence this demo (a scaffolding for building multiple pages)

How to start?

Assuming you are already familiar with vue-CLI 😄

  1. Create a project

    Vue init webpack VUE-multi-Page # Don't use jslint for simplicity, etcCopy the code

  2. Began to transform

    The most important step was to adapt WebPack to support multiple pages, which means webPack has multiple entries. In this step, our main object is the js file in the build folder.

    • First, we modify utils.js to add a method: getEntries, which needs to use node’s globa module

      Var glob = require('glob');Copy the code
      Exports.getentries = function (globPath) {var entries = {} /** * Read the SRC directory and trim the path */ Glob.sync (globPath).foreach (function (entry) {/** * path.basename Extracts the last part of the path separated by '/', */ var basename = path.basename(entry, path.extName (entry), 'the router. Js) / / filtering router. Js / / * * * * * * * * * * * * * * * the begin * * * * * * * * * * * * * * * / /, of course, you can also add module name, which the output is as follows: {module/main: './src/module/index/main.js', module/test: 'the. / SRC/module/test/test. The js'} / / finally compiled output file is in the module directory, Access path to localhost: 8080 / module/index. The HTML / / slice from an existing, return to the selected element in the array to three reverse choice, Split ('/').splice(-3) // var pathName = tmp.splice(0, 1) + '/' + basename; // splice(0, 1) take the TMP / / the first element in the array on the console. The log (pathname) / / entries [the pathname] = entry / / * * * * * * * * * * * * * * * end * * * * * * * * * * * * * * * entries[basename] = entry }); // console.log(entries); / / access to the main entrance of the following: {main: 'the. / SRC/module/index/main js', test:' the. / SRC/module/test/test. The js'} return entries; }Copy the code

    • Secondly, change webpack.base.conf.js

      Delete entry: {app: ‘./ SRC /main.js’}, and replace it with:

      Module. Exports = {... entry: utils. However, (' the. / SRC/module / / *. * * js'),Copy the code

    • Finally, transform webpack.dev.conf.js and webpack.prod.conf.js

      Remove the original HtmlWebpackPlugin

      Var pages = utils.getentries ('./ SRC /module/**/*.html') for(var page in pages) { Var conf = {filename: page + '.html', template: pages[page], // Template path Inject: True, // excludeChunks allow exceptions of certain chunks to be skipped, and the chunks tell the extension which entries to reference. Here's an example: For example, if this demo contains two modules (index and About), it would be best for each module to introduce its own JS, instead of introducing all js on each page, you can do this by removing excludeChunks and then NPM run build // Filter: excludeChunks of each KEY in a JSON Object are returned when the data is filtered. Object.keys(pages).filter(item => { return (item ! = page)})} / / need to generate a few HTML files, then configure several HtmlWebpackPlugin object module. Exports. Plugins. Push (new HtmlWebpackPlugin (conf)}Copy the code

Build steps

Bash # install dependent NPM install # local test NPM run dev # package NPM run buildCopy the code

Access: after local debugging start index | about can

The source code

My lot