webpack1.0升级3.0实战

续vue1.0升级2.0后，webpack和开发环境所有插件也要求升级到新版，升级报错主要集中在插件属性变化，升级完成这样古董项目就焕然一新了。
一、话不多说上代码：
旧版本号

"webpack": "^1.13.1"

新版本号

"webpack": "^3.12.0",

旧版本webpack-base-config.js

// webpack.base.config.js
var path = require('path');
// var webpack = require('webpack');

module.exports = {
   
    // 入口
    entry: {
   
        main: ['./src/main'],
        vendors: ['vue', 'vue-router']
    },
    // 输出
    output: {
   
        path: path.join(__dirname, './dist')
    },
    // 加载器
    module: {
   
        loaders: [{
   
            test: /\.vue$/,
            loader: 'vue'
        }, {
   
            test: /\.js$/,
            loader: 'babel',
            exclude: /node_modules/
        }, {
   
            test: /\.css$/,
            loader: 'style!css!autoprefixer'
        }, {
   
            test: /\.scss$/,
            loader: 'style!css!sass?sourceMap'
        }, {
   
            test: /\.less/,
            exclude: /^node_modules$/,
            loader: `style-loader!css-loader!autoprefixer-loader?{ browsers: ['last 100 versions'] }!less-loader`
        }, {
   
            test: /\.(gif|jpg|png|woff|svg|eot|ttf)\??.*$/,
            loader: 'url-loader?limit=8192'
        }, {
   
            test: /\.(html|tpl)$/,
            loader: 'html-loader?minimize=false'
        }, {
   
            test: /iview.src.*?js$/,
            loader: 'babel'
        }]
    },
    // 转es5
    babel: {
   
        presets: ['es2015'],
        plugins: ['transform-runtime', 'transform-object-rest-spread']
    },
    resolve: {
   
        // require时省略的扩展名，如：require('module') 不需要module.js
        extensions: ['', '.js', '.vue'],
        // 别名，可以直接使用别名来代表设定的路径以及其他
        alias: {
   
            '@': path.join(__dirname, './src'),
            '@Facade': path.join(__dirname, './src/libs/facade.js'),
            // api & msg
            Api: path.join(__dirname, './src/api/Api.js'),
            Msg: path.join(__dirname, './src/libs/util/Msg.js')
        }
    },
    plugins: [

    ]
};

新版本webpack-base-config.js

// webpack.base.config.js
var path = require('path');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
// var webpack = require('webpack');

module.exports = {
   
    // 入口
    entry: {
   
        main: ['./src/main'],
        vendors: ['vue', 'vue-router']
    },
    // 输出
    output: {
   
        path: path.join(__dirname, './dist')
    },
    // 加载器
    // config.vue = {
   
    //     loaders: {
   
    //         css: ExtractTextPlugin.extract(
    //             'style-loader',
    //             'css-loader?sourceMap', {
   
    //                 publicPath: '/dist/'
    //             }
    //         ),
    //         less: ExtractTextPlugin.extract(
    //             'vue-style-loader',
    //             'css-loader!less-loader'
    //         ),
    //         sass: ExtractTextPlugin.extract(
    //             'vue-style-loader',
    //             'css-loader!sass-loader'
    //         )
    //     }
    // };
    module: {
   
        rules: [{
   
            test: /\.vue$/,
            use: [{
   
                loader: 'vue-loader',
                options: {
   
                    loaders: {
   
                        less: ExtractTextPlugin.