Vue + ElementUI project using webpack output MPA

table of Contents

A. Requirements Analysis
II. Analysis of the original proposal
III. 3-step multi-page reform
IV. Summary

Sample code is hosted: http://www.github.com/dashnowords/blogs

Blog Park address: "the history of living in the big front-end" original blog directory

Huawei cloud community Address: [you want the front Daguai upgrade guide]

A. Requirements Analysis

Providing an embedded program to another function unit pages, most pages are used pages independent function, individual pages with the left side bar (corresponding to the integrated form of pages 3-4), as defined in the Resource Locator, after each page is packaged as a single page, the entry htmldocuments need to customize the name and the script and style files need to be placed under the specified path, address public resources must also be replaced by a special character to invoke the logic of adaptation parent system (such as the following structure application jquery.min.jspath may be {{publicRoot}}/{{publicLib}}/jquery.minjs). AB assumption that the original project has these two old page, CDE now need to develop these three pages, the directory structure requirements are as follows:

The blue part of the old resources, the green part of the new development needs.

II. Analysis of the original proposal

The original program uses Vue+ElementUIto develop, build process is basically zero configuration, development efficiency is very high, the page style uniform, but zero configuration build process can only generate SPAapplication mode, so the practice of the original program are:

The build process requires a custom amount extracted to config.jsfile unified management, the general form as follows:

//config.js
module.exports = {
    A:{
        publicPath:'{{publicRoot}}/{{publicLib}}'
        prodFileName:'A.html',
        entryKey:'public/A',
        entryPath:'public/A/A.js'
    },
    B:{
        //...
    }
    //...
}

Used in the development of a unified routing file router.js, the packaging process in main.jsreference to the corresponding page XX.router.spa.jsas routing, while the other pages commented, passing command line parameters when packaging --key=XXX, keyvalue is parsed from the packed script config.jsout packaged in need set parameters, and then the target page packaged as a separate page, other pages, although it also works, but is not involved in packaging.
```
// 入口文件src/main.js
import router from './pages/C/router.spa';
//import router from './pages/D/router.spa';
//import router from './pages/E/router.spa';
```

Above packaging process there have been many problems in use:

No peeling common dependencies, vueand ElementUIcan be packaged into every single page, so that each packed out index.jsalmost the size of 1.2MB, this wasted space is not necessary.
Public style does not form a separate file, which makes whenever a style details changed, you need to manually re each page one by one out of the package.
After increasing the page main.jsthere will be a lot of independent route, if development were cross-page changes, probably in main.jsthe time C in the active route for routing page, when packaged --keyvalue of the parameter passed it became D, this did not cause error, but in fact build results really wrong.
Since the entrance to keep the file main.jshas not changed, so in different pages package, the results are output in distthe directory, you need to manually address the parent project to match, complicated operation.

III. 3-step multi-page reform

The above problems are actually the original proposal because a multi-page development needs in accordance with the one-page application to achieve caused by the need to build automation project some customization.

Configuration 1. Separation webpack

In the present embodiment the development environment and the main difference is that the final packaged routes may be required due to the development of cross-page development, a single inlet and separate routing is performed when the application needs to output multi-page build production, so the first thing is the original webpack.config.jsfile split webpack.base.js, webpack.dev.js, webpack.prod.jsthree documents, webpack.base.jsenvironmental undifferentiated configuration, and then build models based on different, use webpack-merge plugin related configuration environment combined with the basic configuration:

/*webpack.base.js示例*/
const argv = require('yargs-parser')(process.argv.slice(2));
const env_short = argv.env.all ? 'all' : argv.p ? 'prod':'dev';
const webpackConfig = require(`./config/webpack.${env_short}`);//根据-p属性加载webpack的dev配置或prod配置
const merge = require('webpack-merge');

//基本配置
const baseConfig = {
    //....
}

//输出合并后的配置
module.exports = merge(baseConfig, webpackConfig);

webpack.dev.jsSPA remains set originally developed to meet the demand.

2. pulled out of external references

In this case a large external applications vueand ElementUImany developers have been using automation tools scaffolding, and do not realize how these two libraries depend on the introduction of an external project. Public libraries need to pull away webpackin the configuration of its fill in the externalConfiguration item:

module.exports = {
 //...
  externals:{
      vue:'Vue',
      'element-ui':'ELEMENT'
  },
  //...
}

keyThe module name referenced valueglobal corresponds to the introduction of the module name, meaning external configuration item is: Please do not use this module injected into the JS file compiled in, any import the source code appear / require this module statement , set it to retain and rely on a modular manner adapted according to the standard .

Tips:

VueWhen there are as many external dependencies to build the package, in this case because of the use webpackwere constructed, there is no demand online compilation of templates, so no need to introduce a complete Vue, but only after the introduction of the compressed version contains only the runtime vue.runtime.min.jscan be.

Note that the external import library name, such as the case of the ELEMENT , developers often fill in for their own use in code ElementUI caused by an error when uncertainty names, there is a simple way is to find the resources to see a CDN click, typically beginning codes are UMDstandard fixed structure, it is easy to see the images (as shown below).

CDN will then address a public library or a local address resource added to index.html, you can use the template syntax, and then from html-webpack-pluginpassing custom parameters to instantiate the plug:

<!--html文件模板-->
<body>
  <div id="app"></div>
  <script src="<%= htmlWebpackPlugin.options.vue_path %>"></script>
  <script src="<%= htmlWebpackPlugin.options.elementUI_path %>"></script>
  <script src="<%= htmlWebpackPlugin.options.tpl_entryPath %>/index.js"></script>
</body>

//webpack.prod.js
module.exports = {
    //...
  plugins: [
    new HtmlWebpackPlugin({
      template: 'src/index.html',//生成index.html时依据的模板
      filename: '.....',
      inject:false,
      tpl_entryPath:'....',
      vue_path:'.....',
      elementUI_path:'.....',
    }),
    //new BundleAnalyzerPlugin()
  ],
}

After generating the final package index.htmlfile is as follows:

<body>
  <div id="app"></div>
  <script src="{{publicRoot}}/{{publicLib}}/vue.min.js"></script>
  <script src="{{publicRoot}}/{{publicLib}}/element-ui.js"></script>
  <script src="public/A/A.js"></script>
</body>

If a third party, from a local database, the need /node_modules/element-ui/lib/index.jsand /node_modules/vue/dist/vue.runtime.min.jstwo dependent files are copied to libthe corresponding address in the folder, so that access index.htmltime can be in the form of external dependencies of loads it came. Peel style file directly using the plug-in can be completed, webpack4 previous version extract-text-webpack-plugin, version 4.0 from the consistent use mini-css-extract-plugin.

3. webpack custom multi-entry

Configure multiple key entry is packaged multi-page applications, due to the presence of nested directories packed result, it is necessary for entrythe key object to be some customization, the path information is directly packaged keyto custom values, while the need to instantiate a plurality of HtmlWebpackPlugingenerating a respective file entry for each index.htmlaccess entry, custom parameters can be passed at instantiation:

//webpack.prod.js
module.exports = {
    entry:{
        'C/index':'./src/pages/C/C.entry.js',
        'DESK/D/index':'./src/pages/D/D.entry.js',
        'DESK/E/index':'./src/pages/E/E.entry.js'
    }
    //...
    plugins:[
       new HtmlWebpackPlugin({...paramsC}),
       new HtmlWebpackPlugin({...paramsD}),
       new HtmlWebpackPlugin({...paramsE}),
    ]
}

Of course, you can entryor pluginsassembly process of peeling an array to another file, and then direct reference:

Of course, each page of the file entry X.entry.jscorresponding to the old program main.jsportion remaining after the routing information is not enabled is commented remove files, it is sufficient to support every single page to be accessed independently.

IV. Summary

After the above transformation in distthe structure of demand and output in the directory publicstructure under the directory on keeping it, and each page of the index.jsdocument is also reduced to around 100K. Of course, you can also use node.jsto write some automated scripts, the subsequent replacement process is automated, or continue to webpackthe packaging process is optimized, we will not repeat them.