Webpack 3.x Vue multi-page/single-page scaffolding, out of the box

Introduction to the

The project is a scaffold removed from the daily development of the project to facilitate subsequent development. Scaffolding is configured with es6-7-8+ CSSNext + VUE development environment by default, but is not limited to VUE development. And optimize the packaging process of Webpack. Support single page/multi-page development, support code cutting asynchronous loading, interested please refer to the Webpack Chinese document # code separation.

For those unfamiliar with the new grammar, please refer to:

Es6: Ruan Yifeng es6 introduction
Cssnext: postcss website
Vue: VUE Chinese official website

packaging

The project is configured with three code environments by default, namely production(formal environment), Production -D (test environment) and Development (development).

The test environment is packaged in the same way as the official environment and is mainly used for code tuning in the official and beta versions. The development version is relatively simple, eliminating code compression and other unnecessary optimizations, supporting development hot update.

Scaffolding uses DllPlugin + DllReferencePlugin to package external resource packages to optimize the packaging speed. Manifest and packaged file packages are placed in the static/libs/ JS directory, and can also enter the script self-configuration path.

build

npm run buildCopy the code

DLL (Package external resource libraries)

npm run build:vendors
Copy the code

If you need to package the external resource repositories, run the Build: Vendors command to package the external resource bundles, and then do the build.

. ├ ─ ─ the README. Md ├ ─ ─ build │ ├ ─ ─ build surprised -- jeter s │ ├ ─ ─ build. Js │ ├ ─ ─ dev - client. Js │ ├ ─ ─ dev. Js │ ├ ─ ─ util. Js │ ├ ─ ─ Webpack. Base. Config. Js │ ├ ─ ─ webpack. Dev. Config. Js │ ├ ─ ─ webpack. DLL. Config. Js │ └ ─ ─ webpack. Prod. Config. Js ├ ─ ─ the config │ ├ ─ ─ base. Js │ ├ ─ ─. Dev env. Js │ ├ ─ ─ index. The js │ ├ ─ ─ prod - d.e nv. Js │ ├ ─ ─ the prod. The env. Js │ └ ─ ─ util. Js ├ ─ ─ package - lock. Json ├ ─ ─ package. Json └ ─ ─ the SRC ├ ─ ─ pages │ ├ ─ ─ common │ │ └ ─ ─ js │ │ └ ─ ─ common. Js │ ├ ─ ─ index (page 1. Single page mode will default to the index files as page) │ │ ├ ─ ─ index. The HTML │ │ ├ ─ ─ js │ │ │ ├ ─ ─ index. The js │ │ └ ─ ─ style │ └ ─ ─ page2 (page 2) │ ├ ─ ─ index. The HTML │ ├ ─ ─ js │ │ └ ─ ─ index. The js │ └ ─ ─ style └ ─ ─ the static static resources (folder) ├ ─ ─ libs │ └ ─ ─ js (js folder) │ ├ ─ ─ manifest_vendors. Json │ └ ─ ─ Vendors. Js └ ─ ─ test. TXTCopy the code

Note: with multiple pages enabled, the script gets all the contents in the SRC /pages folder except the common folder by default! (_) * /! The HTML file of (_)*.html condition is used as HTML page, and the index.js folder under the js folder that meets the condition is used as webpack entry.

The basic format of each page item

My - page (the name of the page) ├ ─ ─ index. The HTML (page rendering HTML template) ├ ─ ─ js │ └ ─ ─ index. The js script entrance (page) └ ─ ─ style (style file) of the pageCopy the code

.├ ── CSS │ ├─ ├─ page2.7f05035e.css │ ├─ page2.7F05035e.css │ ├─ page2.7F05035e.css │ ├─ page2.7F05035e.css │ ├─ page2.7F05035e.css │ ├─ page2.7F05035e.cs.map ├ ─ ─ js │ ├ ─ ─ index. 3 f05035ea26e8a6c3eb8. Js │ ├ ─ ─ index. 3 f05035ea26e8a6c3eb8. Js. Gz │ ├ ─ ─ Index. 3 f05035ea26e8a6c3eb8. Js. Map │ ├ ─ ─ page2.3 f05035ea26e8a6c3eb8. Js │ └ ─ ─ page2.3 f05035ea26e8a6c3eb8. Js. Map ├ ─ ─ the static () │ ├ ─ ─ libs │ │ └ ─ ─ js │ │ ├ ─ ─ manifest_vendors. Json │ │ └ ─ ─ vendors. Js │ └ ─ ─ test. TXT ├ ─ ─ index. The HTML └ ─ ─ page2. HTMLCopy the code

configuration

The basic configuration of scaffolding is the config/base.js file. Modifying the configuration file will affect the packaging effect.

{
    isMultiplePage: true.//Whether to enable the asynchronous loading function
    isOpenSyncImport: true.//Minimum chunk size
    minChunkSize: 10000.//Whether to automatically open the page in dev mode
    autoOpenBrowser: true.//File directory
    assetsRoot: path.resolve(__dirname.'../src'),
    //Generated directory
    buildRoot: path.resolve(__dirname.'../dist'),
    //Static resource root directory
    staticAssets: 'static'.//Path is generated
    publicPath: '/'.//Public alias
    commonAlias: {
        Static: 'static'.'@': 'pages'
    },
    //External extension
    externals: {
        // '$': 'JQuery'
    },
    //Public modules (files in common/JS files are packaged as' Commons chunks' by default)
    commons: {
        //demo: path.resolve(__dirname, '.. /src/pages/index/js/demo.js')
    },
    //The external repository to package
    library: [
        'axios'.'vue'.'vue-router'].//Pages to import from the external repository (if empty, import all)
    libraryEntry: [
        // 'index',
        // 'page2'].//Local development port
    port: 8009.//Local development agent
    proxy: {
        // '/api': {
        //  target: "http://*.com",
        //  changeOrigin: true,
        //  pathRewrite: {
        //      '^/api': ''
        //  },
        //  logLevel: 'error'
        // }}}Copy the code