Some time ago, the project team planned to develop a new App project quickly. The App development side provides shell and some system-level functions. All pages are completed by H5, considering compatibility with Android 4.1 and ios7.1. The new project, without historical burden, tried a new development mode, adopting a set of Webpack + VUe-CLI + VUe-Router + ES6 + AXIOS. From Webpack configuration to file directory, from development process to online deployment, we explored and tried, and now the first version has been online. The optimization will continue later, with the current basic deployment mode recorded first.

Webpack - ^ 3.6.0 | vue - ^ 2.5.2 | vue - the router - ^ 3.0.1 | axios - ^ 0.17.1Copy the code

Introduction to the

  • The project uses front-end and back-end separation, and back-end development is only responsible for providing interfaces and static servers
  • The front end uses multiple entries and multiple single pages (each single page may contain vue-Router routing to different sub-pages), and finally generates multiple pages under DIST.htmlAnd the corresponding.js/.cssfile
  • The domain name root directory points directly tonpm run buildThe dist directory generated later can be accessed throughhttp://m.example.com/index.htmlDirect access toindex.html

The resulting dist directory looks something like:

  • dist
    • index.html
    • center/
      • index.html
      • regist.html
      • login.html
    • static/
      • js/
        • vendor.[chunkhash].js
        • index.[chunkhash].js
        • regist.[chunkhash].js
        • login.[chunkhash].js
      • css/
        • index.[chunkhash].css
        • regist.[chunkhash].css
        • login.[chunkhash].css

Ex. : Can access to the home page, http://m.example.com/index.html, http://m.example.com/center/regist.html, access to the registration page, The http://m.example.com/center/regist.html#agreement page access to the user agreement

The directory structure

  • Dist: As above, do not follow version control
  • Build: Webpack builds the configuration
  • Config: develops related configurations
    • Webpack.user.conf.js: a new custom configuration file, where all configuration changes to Webpack are theoretically made, and then thewebpack.dev.conf.jsandwebpack.dev.prod.jsMerge overlay
  • Node_modules: Plug-ins and dependencies that do not follow version control
  • SRC: development directory
    • Assets: stores static resourcesbase.js/base.css/plugins/images
    • Components: Components that may be common
    • Entry: Multiple entry files packed by WebpackHtmlWebpackPluginEach instance corresponds to an entry, and each entry is packaged into a page
    • Router: Some pages may be usedvue-routerImplement front-end routing, which is defined under this folder and will be introduced into use by entry JS
    • Deposit the template:HtmlWebpackPluginPackage a template page based on which multiple entries can share a template page. However, in real development, some entries may have private logic and need to create a separate template
    • Page: Stores the actual page components and assembly pages
  • Package. json: Package information and dependencies

Example: if we want to the resulting http://m.example.com/center/regist.html routing, and contains the front need to involve the file:

1. The SRC/entry/regist. Js, to create the entry documents, for ` HtmlWebpackPlugin ` use 2. Config/webpack user. Conf., js, new entrance, entrance to the specified file for ` SRC/entry/regist js `; Create an instance of 'HtmlWebpackPlugin' and specify the generated file path, filename and js 3. SRC /router/regist.js because front-end routing is involved. 4. Need to configure the routing information page/center/regist vue, page/center/agreement. The vue, the development of logic style on the page itselfCopy the code

Webpack configuration

Default webpack configuration in general is to use the build/webpack base. Js + build/webpack. Dev. Js/build/webpack. Prod. The result of js after the merge, in order to facilitate unified configuration, Built under the config webpack. User. Conf., js, respectively, and the build/webpack dev. Js/build/webpack. Prod. Js merge, so page configuration, basic it in webpack. User. Conf. Js.

  • Configuration items
    • Context: set in the root directory of package.json
    • Entry: set tosrc/entry/
    • Ouput: The production environment is set to/src/dist/By default, the development environment is packed and put in memory, which does not represent the actual physical path. Output is configured as follows:
    output: {
    path: path.resolve(__dirname, '.. /dist'),
    filename: 'static/js/[name].[chunkhash:16].js'.chunkFilename: 'static/js/[id].[chunkhash:16].js'.publicPath: '/pailifan/'
}
Copy the code
    • Plugins: plug-in configuration
      • HtmlWebpackPlugin: new Multiple instances, each corresponding to a single page
      • CommonsChunkPlugin: Common module extract package. By default, [vue.js-v2.5.2, vue-router.js-v3.0.1] is specified to be packaged, and minChunks are set to Infinity to prevent other common modules from being packaged
      new webpack.optimize.CommonsChunkPlugin({
    name: 'vendor'./* Specify the module corresponding to vendor as [vue.js,vue-router.js]*/ in the entry
    filename: 'static/js/vendor.[chunkhash:16].js'.minChunks: Infinity
})
Copy the code

Requirements development and deployment process

  1. Pull the code
  2. Switch to the package.json root directory and executenpm i && npm run dev
  3. Create a new page (see the example in the directory structure section) or modify it
  4. Submit code, ignore directory includedsrc/dist,src/node_modules
  5. Internal test/external test/gray scale/production, executionnpm i && npm run build, the production environment cannot directly operate the Dist directory (NPM run build will actually delete the dist directory first to regenerate, and direct operation will result in file 404 during release). The dist should be generated on the distributor first and then overwritten to the corresponding Dist directory on the production server
  6. Version rollback, roll back the code, and executenpm i && npm run build, consistent with the release

Other third-party plug-ins and libraries

  • Axios: Ajax library, part of which is explained and resolved in another note
  • Vue – touch: gesture library
  • Es6-promise: Pollyfill the promise

Attached: VUE-CLI + ES6 + AXIos project stomp pit