upgrade to webpack rc

Author: egoist

template/build/server.js

@@ -1,25 +1,32 @@
 'use strict'
 const fs = require('fs')
 const path = require('path')
+const chalk = require('chalk')
 const express = require('express')
 const webpack = require('webpack')
-const fse = require('fs-extra')
 const webpackConfig = require('./webpack.dev')
 const config = require('./config')
 
 const app = express()
 
 const port = config.port
 webpackConfig.entry.client = [
-  `webpack-hot-middleware/client{{#electron}}?path=http://localhost:${port}/__webpack_hmr{{/electron}}`,
+  `webpack-hot-middleware/client?reload=true{{#electron}}&path=http://localhost:${port}/__webpack_hmr{{/electron}}`,
   webpackConfig.entry.client
 ]
 {{#electron}}
 
 webpackConfig.output.publicPath = `http://localhost:${port}/assets/`
 {{/electron}}
 
-const compiler = webpack(webpackConfig)
+let compiler
+
+try {
+  compiler = webpack(webpackConfig)
+} catch (err) {
+  console.log(err.message)
+  process.exit(1)
+}
 
 const devMiddleWare = require('webpack-dev-middleware')(compiler, {
   publicPath: webpackConfig.output.publicPath,
@@ -28,7 +35,9 @@ const devMiddleWare = require('webpack-dev-middleware')(compiler, {
     modules: false,
     children: false,
     chunks: false,
-    chunkModules: false
+    chunkModules: false,
+    hash: false,
+    timings: false
   }
 })
 app.use(devMiddleWare)
@@ -37,13 +46,10 @@ app.use(require('webpack-hot-middleware')(compiler))
 const mfs = devMiddleWare.fileSystem
 const file = path.join(webpackConfig.output.path, 'index.html')
 
-devMiddleWare.waitUntilValid(() => {
-  const html = mfs.readFileSync(file)
-  fse.ensureDirSync(path.dirname(file))
-  fs.writeFile(file, html, 'utf8', err => {
-    if (err) console.log(err)
-  })
-})
+console.log(`\n  > VuePack is running at ${chalk.yellow(`http://localhost:${port}`)}\n`)
+
+
+devMiddleWare.waitUntilValid()
 
 app.get('*', (req, res) => {
   devMiddleWare.waitUntilValid(() => {

template/build/utils.js

@@ -1,5 +1,6 @@
 'use strict'
 const path = require('path')
+const ExtractTextPlugin = require('extract-text-webpack-plugin')
 const config = require('./config')
 
 const _ = module.exports = {}
@@ -19,3 +20,42 @@ _.outputIndexPath = config.electron ?
 _.target = config.electron ?
   'electron-renderer' :
   'web'
+
+// https://github.com/egoist/vbuild/blob/master/lib/vue-loaders.js
+_.loadersOptions = () => {
+  const isProd = process.env.NODE_ENV === 'production'
+
+  function generateLoader(langs) {
+    langs.unshift('css-loader?sourceMap&-autoprefixer')
+    if (!isProd) {
+      return ['vue-style-loader'].concat(langs).join('!')
+    }
+    return ExtractTextPlugin.extract({
+      fallbackLoader: 'vue-style-loader',
+      loader: langs.join('!')
+    })
+  }
+
+  return {
+    minimize: isProd,
+    options: {
+      // css-loader relies on context
+      context: process.cwd(),
+      // postcss plugins apply to .css files
+      postcss: config.postcss,
+      babel: config.babel,
+      vue: {
+        // postcss plugins apply to css in .vue files
+        postcss: config.postcss,
+        loaders: {
+          css: generateLoader([]),
+          sass: generateLoader(['sass-loader?indentedSyntax']),
+          scss: generateLoader(['sass-loader']),
+          less: generateLoader(['less-loader']),
+          stylus: generateLoader(['stylus-loader']),
+          js: 'babel-loader'
+        }
+      }
+    }
+  }
+}

template/build/webpack.base.js

@@ -14,8 +14,11 @@ module.exports = {
     filename: '[name].js',
     publicPath: '/'
   },
+  performance: {
+    hints: process.env.NODE_ENV === 'production' ? 'warning' : false
+  },
   resolve: {
-    extensions: ['', '.js', '.vue', '.css', '.json'],
+    extensions: ['.js', '.vue', '.css', '.json'],
     alias: {
       root: path.join(__dirname, '../client'),
       components: path.join(__dirname, '../client/components')
@@ -25,38 +28,33 @@ module.exports = {
     loaders: [
       {
         test: /\.vue$/,
-        loaders: ['vue']
+        loaders: ['vue-loader']
       },
       {
         test: /\.js$/,
-        loaders: ['babel'],
+        loaders: ['babel-loader'],
         exclude: [/node_modules/]
       },
       {
         test: /\.es6$/,
-        loaders: ['babel']
+        loaders: ['babel-loader']
       },
       {
         test: /\.(ico|jpg|png|gif|eot|otf|webp|svg|ttf|woff|woff2)(\?.*)?$/,
-        loader: 'file',
+        loader: 'file-loader',
         query: {
           name: 'static/media/[name].[hash:8].[ext]'
         }
       }
     ]
   },
-  babel: config.babel,
-  postcss: config.postcss,
-  vue: {
-    loaders: {},
-    postcss: config.postcss
-  },
   plugins: [
     new HtmlWebpackPlugin({
       title: config.title,
       template: __dirname + '/index.html',
       filename: _.outputIndexPath
-    })
+    }),
+    new webpack.LoaderOptionsPlugin(_.loadersOptions())
   ],
   target: _.target
 }

template/build/webpack.dev.js

@@ -1,4 +1,6 @@
 'use strict'
+process.env.NODE_ENV = 'development'
+
 const webpack = require('webpack')
 const base = require('./webpack.base')
 const _ = require('./utils')
@@ -16,7 +18,7 @@ base.plugins.push(
 base.module.loaders.push(
   {
     test: /\.css$/,
-    loader: `style-loader!${_.cssLoader}!postcss-loader`
+    loaders: ['style-loader', _.cssLoader, 'postcss-loader']
   }
 )
 

template/build/webpack.prod.js

@@ -1,8 +1,10 @@
 'use strict'
+process.env.NODE_ENV = 'production'
+
 const exec = require('child_process').execSync
 const webpack = require('webpack')
 const ExtractTextPlugin = require('extract-text-webpack-plugin')
-const ProgressBarPlugin = require('progress-bar-webpack-plugin')
+const ProgressPlugin = require('webpack/lib/ProgressPlugin')
 const base = require('./webpack.base')
 const pkg = require('../package')
 const _ = require('./utils')
@@ -24,14 +26,11 @@ base.entry.vendor = config.vendor
 base.output.filename = '[name].[chunkhash:8].js'
 // add webpack plugins
 base.plugins.push(
-  new ProgressBarPlugin(),
+  new ProgressPlugin(),
   new ExtractTextPlugin('styles.[contenthash:8].css'),
   new webpack.DefinePlugin({
     'process.env.NODE_ENV': JSON.stringify('production')
   }),
-  new webpack.LoaderOptionsPlugin({
-    minimize: true
-  }),
   new webpack.optimize.UglifyJsPlugin({
     sourceMap: true,
     compress: {
@@ -57,10 +56,4 @@ base.module.loaders.push({
   })
 })
 
-// extract css in single-file components
-base.vue.loaders.css = ExtractTextPlugin.extract({
-  loader: 'css-loader?-autoprefixer',
-  fallbackLoader: 'vue-style-loader'
-})
-
 module.exports = base

template/client/components/App.vue

@@ -17,10 +17,11 @@ body {
 }
 .page {
   text-align: center;
-}
-code {
-  background-color: #f0f0f0;
-  padding: 3px 5px;
-  border-radius: 2px;
+  /* nesting for the need to test postcss */
+  code {
+    background-color: #f0f0f0;
+    padding: 3px 5px;
+    border-radius: 2px;
+  }
 }
 </style>

template/client/components/Counter.vue

@@ -21,7 +21,6 @@ export default {
 
 <style>
 .counter {
-  cursor: pointer;
   margin: 100px auto;
   border-radius: 3px;
   width: 200px;

template/client/components/Counter/style.css

@@ -1,5 +1,4 @@
 .counter {
-  cursor: pointer;
   margin: 100px auto;
   border-radius: 3px;
   width: 200px;
@@ -9,4 +8,4 @@
   font-size: 5rem;
   background-color: #f0f0f0;
   user-select: none;
-}
+}

template/package.json

@@ -29,6 +29,7 @@
     "babel-plugin-transform-vue-jsx": "^3.1.0",
     "babel-preset-es2015": "^6.14.0",
     "babel-preset-stage-1": "^6.13.0",
+    "chalk": "^1.1.3",
     "css-loader": "^0.23.1",
     "cross-env": "^2.0.0",
     {{#electron}}
@@ -41,16 +42,14 @@
     {{/eslint}}
     "express": "^4.14.0",
     "extract-text-webpack-plugin": "^2.0.0-beta.3",
-    "fs-extra": "^0.30.0",
     "file-loader": "^0.9.0",
     "html-webpack-plugin": "^2.22.0",
     "postcss-loader": "^0.9.1",
     "postcss-nested": "^1.0.0",
-    "progress-bar-webpack-plugin": "^1.9.0",
     "style-loader": "^0.13.1",
     "vue-loader": "^10.0.2",
     "vue-template-compiler": "^2.1.3",
-    "webpack": "2.1.0-beta.22",
+    "webpack": "2.2.0-rc.1",
     "webpack-dev-middleware": "^1.8.1",
     "webpack-hot-middleware": "^2.12.2"
   }