Multi Vue applications with webpack 2.

• flow - static type check
• testcafe - auto ui test

With the newest enviroment(2016-12-17):

• webpack@v2.2.1
• webpack-dev-server@v2.2.0
• extract-text-webpack-plugin@v2.0.0-rc.2
• vue@^2.1.6

Have these features:

• webpack v2 config
• long-term cache
• multi entry, multi vue app
• vue-jsx
• 1px in every device (rem.js)

Use these loader to build apps:

• babel-loader
• css-loader
• file-loader
• html-loader
• json-loader
• postcss-loader
• sass-loader
• standard-loader
• url-loader
• vue-loader
• vue-style-loader

Use these plugins to assist develop:

• yarn
• standardjs
• webpack-dashboard
• open-browser-webpack-plugin

And these for production:

• extract-text-webpack-plugin
• webpack-manifest-plugin
• webpack-md5-hash
• imagemin-webpack-plugin
• imagemin-mozjpeg
• webpack-visualizer-plugin

Upgrade webpack 1.x to webpack 2.x, these pages are helpful:

• How to Upgrade from Webpack 1?
• What's new in webpack 2
• postcss-loader#webpack-2x-config
• configurations/advanced | vue-loader
• features/postcss | vue-loader

$ yarn # or npm install $ npm start # for development $ npm run build # for production

I have some tips to metion you:

• webpack@^2.1.0-beta.25
• webpack-dev-server@2.1.0-beta.9
• extract-text-webpack-plugin@2.0.0-beta.4

Now webpack understands import and export without them being transformed to CommonJS,
You can change .babelrc to tell Babel to not parse es6 module.

{ "presets": [ ["es2015", { "modules": false }] ] }

We can use system.import to dynamic loading modules.
Your browser must support Promise, for old browser you can use es6-promise to polyfill.

Promise.all([ System.import('vue'), System.import('./App') ]) .then(([Vue, App]) => { /* eslint-disable no-new */ new Vue({ el: '#app', render: h => h(App.default) }) }) .catch(err => { console.error(err) })

A few config true into webpack.LoaderOptionsPlugin like:
debug, uglify minimize, third part loader options...

new webpack.LoaderOptionsPlugin({ debug: false, // debug minimize: true, // Uglify minimize options options: { context: urls.project, // sass-loader need this // vue & postcss options must write to here vue: { loaders: loaders.css({ sourceMap: true, extract: prod }), postcss: [autoprefixer({ browsers: ['last 2 versions'] })] }, postcss: [autoprefixer({ browsers: ['last 2 versions'] })] } })

UglifyJsPlugin sourceMap now defaults to false,
if you need sourceMap in production, you need to pass sourceMap: true.

new UglifyJsPlugin({ sourceMap: true })

// In webpack 2.x, // extensions can not push empty string ('') resolve.extensions: ['.js', '.jsx', '.vue']

A webpack-dev-server undocument api, to reduce a lot of useless information

// webpack-dev-server node api stats: { // Config for minimal console.log mess. assets: false, colors: true, version: true, hash: true, timings: true, chunks: true, chunkModules: false }

For more configuration infos, to see:

• How to Upgrade from Webpack 1?