sagarjauhari / webpack

A full-featured Webpack + vue-loader setup with hot reload, linting, testing & css extraction.

vue-webpack-boilerplate

A full-featured Webpack setup with hot-reload, lint-on-save, unit testing & css extraction.

Usage

This is a project template for vue-cli.

$ npm install -g vue-cli
$ vue init webpack my-project
$ cd my-project
$ npm install
$ npm run dev

Folder Structure

.
├── build
│   ├── dev-server.js         # development server script
│   ├── karma.conf.js         # unit testing config
│   ├── webpack.base.conf.js  # shared base webpack config
│   ├── webpack.dev.conf.js   # development webpack config
│   ├── webpack.prod.conf.js  # production webpack config
│   └── ...
├── src
│   ├── main.js               # app entry file
│   ├── App.vue               # main app component
│   ├── components            # ui components
│   │   └── ...
│   └── assets                # module assets (processed by webpack)
│       └── ...
├── static                    # pure static assets (directly copied)
├── dist                      # built files ready for deploy
├── test
│   └── unit                  # unit tests
│       ├── index.js          # unit test entry file
│       └── ...
├── .babelrc                  # babel config
├── .eslintrc.js              # eslint config
├── index.html                # main html file
└── package.json              # build scripts and dependencies

What's Included

• npm run dev: first-in-class development experience.

  • Webpack + vue-loader for single file Vue components.
  • State preserving hot-reload
  • State preserving compilation error overlay
  • Lint-on-save with ESLint
  • Source maps

• npm run build: Production ready build.

  • JavaScript minified with UglifyJS.
  • HTML minified with html-minifier.
  • CSS across all components extracted into a single file and minified with cssnano.
  • All static assets compiled with version hashes for efficient long-term caching, and a production index.html is auto-generated with proper URLs to these generated assets.
  • To serve built files, run an HTTP server inside /dist.

• npm test: Unit tests run in PhantomJS with Karma + karma-jasmine + karma-webpack.

  • Supports ES2015 in test files.
  • Supports all webpack loaders.
  • Easy mock injection.

For detailed explanation on how things work, consult the docs for vue-loader.

Difference between src/assets/ and static/

• Files inside src/assets/ should be referenced via relative paths inside Vue component templates and styles. They will be processed by url-loader and file-loader before copied into /static.

• Files inside static/ are copied directly; they can be reference anywhere via root-relative paths that start with /static/.

In general you should prefer src/assets/ as it allows you to leverage loader features such as file naming with hashes and conditional base-64 inline-ing.

Customizations

You will likely need to do some tuning to suit your own needs:

• Install additional libraries that you need, e.g. vue-router, vue-resource, vuex, etc...

• Use your preferred .eslintrc config.

• Add your preferred CSS pre-processor, for example:

  npm install less-loader --save-dev

• Working with an existing backend server:

  • The dev server is simply an Express server with webpack-dev-middleware and webpack-hot-middleware pre-configured. You can add your own routing rules to build/dev-server.js to proxy certain requests to an existing backend server. Or, if you are using Express yourself, you can simply copy the middleware configuration, but make sure to add them only in development mode!

• For unit testing:

  • You can run the tests in multiple real browsers by installing more karma launchers and adjusting the browsers field in build/karma.conf.js.

  • You can also swap out Jasmine for other testing frameworks, e.g. use Mocha with karma-mocha.

Fork It And Make Your Own

You can fork this repo to create your own boilerplate, and use it with vue-cli:

vue init username/repo my-project