https://github.com/leizeng/webpack-code-splitted-starter

https://github.com/leizeng/webpack-code-splitted-starter

Last synced: 6 days ago
JSON representation

• Host: GitHub
• URL: https://github.com/leizeng/webpack-code-splitted-starter
• Owner: LeiZeng
• Created: 2016-06-04T09:42:04.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2016-06-04T09:45:29.000Z (over 8 years ago)
• Last Synced: 2024-12-01T04:22:22.649Z (2 months ago)
• Language: JavaScript
• Size: 1.95 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
Quick start for webpack code splitting

-------------------------------------

Refference:

[Official Sample](https://github.com/webpack/webpack/tree/v2.1.0-beta.8/examples/common-chunk-and-vendor-chunk)

##Getting start

`npm i && npm run build`

Code dependencies structure:

```

  src/

    pageA.js

      vendor1

      utilA

      utilB

    pageB.js

      utilB

      utilC

    pageC.js

      vendor2

      utilA

      utilC

```

Code bundles structure:

```

  dist/js/

    vendor.js

      webpack_vendor

      vendor1

      vendor2

    common.js

      utilA

      utilB

      utilC

    pageA.js

    pageB.js

    pageC.js

```

webpack configuration:

```js

var path = require("path");

var CommonsChunkPlugin = require("webpack/lib/optimize/CommonsChunkPlugin");

module.exports = {

    entry: {

        vendor: ["./src/vendor1", "./src/vendor2"],

        pageA: "./src/pageA",

        pageB: "./src/pageB",

        pageC: "./src/pageC"

        // older versions of webpack may require an empty entry point declaration here

        // common: []

    },

    output: {

        path: path.join(__dirname, "dist/js"),

        filename: "[name].js"

    },

    plugins: [

        new CommonsChunkPlugin({

            // The order of this array matters

            names: ["common", "vendor"],

            minChunks: 2

        })

    ]

};

```