搭建一个企业级的Vue工程！

虽然Vue CLI可以快速生成项目，但是对于企业需要扩展特定的功能变得极其复杂，并不适合定制化的开发，所以企业中通常是开发人员自己通过构建工具去配置打包项目。下面演示Vue工程的配置代码。

下面是项目的目录关系：

webpack配置分为了4个：公共的以base命名，开发环境的以dev命名，生产环境的以pro命名，以dll命名的是称为动态链接库是提高打包速度用。

// webpack.base.conf.js
const path = require('path')
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const AddAssetHtmlPlugin = require('add-asset-html-webpack-plugin')
const ProgressBarPlugin = require('progress-bar-webpack-plugin')
const VueLoaderPlugin = require('vue-loader/lib/plugin')
const dir = process.cwd()


module.exports = {
  entry: {
    app: path.resolve(dir, 'src/main.js')
  },
  resolve: {
    extensions: [
      '.js', '.vue', '.less', '.css'
    ],
    alias: {
      'src': path.resolve(dir, 'src')
    }
  },
  module: {
    rules: [
      {
        test: /\.(jsx?|babel|es6)$/,
        include: dir,
        exclude: /node_modules/,
        loader: 'babel-loader'
      },
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          compilerOptions: {
            preserveWhitespace: false
          }
        }
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.resolve(dir, 'template.