Until now, the style was added to the page via the JavaScript code. This is great in development because it allows hot-reloading with webpack. However, in production, it is recommended to extract it into separate CSS files.

1. Install the extract-text-webpack-plugin package in the dev dependencies:

      npm i -D extract-text-webpack-plugin

2. In the webpack/common.js configuration file, add a new isProd variable:

      const isProd = process.env.NODE_ENV === 'production'

3. Modify the vue-loader rule to enable the CSS extraction if we are in production and to ignore the whitespaces between HTML tags:

      {
        test: /.vue$/,
        loader: 'vue-loader',
        options: {
          extractCSS: isProd,
          preserveWhitespace: false,
        },
      },

4. Add the ExtractTextPlugin and the ModuleConcatenationPlugin to the production-only plugins list at the bottom of the file:

      if (isProd) {
        module.exports.devtool = '#source-map'
        module.exports.plugins = (module.exports.plugins || 
        []).concat([
          // ...
          new webpack.optimize.ModuleConcatenationPlugin(),
          new ExtractTextPlugin({
            filename: 'common.[chunkhash].css',
          }),
        ])
      } else {
       // ...
      }

ExtractTextPlugin will put the style into CSS files and the ModuleConcatenationPlugin will optimize the compiled JavaScript code to be faster.