webpack-dev-server报错

Question

目录结构

// webpack.base.conf.js
'use strict';

const path = require('path');
const config = require('../config');

/**
 * 获得绝对路径
 * @method resolve
 * @param  {String} dir 相对于本文件的路径
 * @return {String}     绝对路径
 */
function resolve(dir) {
    return path.join(__dirname, '..', dir)
}

// eslint 
const createESlintRules = () => ({
    test: /\.(js|vue)$/,
    loader: 'eslint-loader',
    enfore: 'pre',
    include: [resolve('src'), resolve('test')],
    options: {
        formatter: require('eslint-friendly-formatter'), // // 指定错误报告的格式规范
        // emitWarning: !config.dev.showEslintErrorsInOverlay
    }
})

module.exports = {
    context: path.resolve(__dirname, '../'), // 上下文
    entry: {
        app: './src/main.js'
    },
    output: {
        path: config.build.assetsRoot,
        filename: '[name]'.js
    },
    resolve: {
        extensioins: ['.js', '.vue', '.json'],
        alias: {
            'vue$': 'vue/dist/vue.esm.js',
            '@': resolve('src'),
        }
    },
    module: {
        rules: [
            // 根据配置确定是否使用eslint
            ...(config.dev.useEslint ? [createLintingRule()] : []),
            {
                test: /\.vue$/,
                loader: 'vue-loader',
                options: {}
            },
            {
                test: /\.js$/,
                loader: 'babel-loader',
                include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
            },
            {
                test: /\.(png|jpe?g|gif|svg)(\?.*)/,
                loader: 'url-loader',
                options: {
                    limit: 10000,
                    name: 'img/[name].[hash:7].[ext]'
                }
            },
            {
                test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
                loader: 'url-loader',
                options: {
                    limit: 10000,
                    name: 'media/[name].[hash:7].[ext]'
                }
            },
            {
                test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
                loader: 'url-loader',
                options: {
                    limit: 10000,
                    name: 'fonts/[name].[hash:7].[ext]'
                }
            }
        ]
    }
}

// webpack.dev.conf.js
'use strict';

// 开发模式下

const path = require('path');
const webpack = require('webpack');
const config = require('../config'); // 引入配置文件
const merge = require('webpack-merge');
const baseWebpackConfig = require('./webpack.base.conf');
const HtmlWebpackPlugin = require('html-webpack-plugin');
// 通过process全局变量来获取全局参数(可以更改默认配置)
const HOST = process.env.HOST
const PORT = process.env.PROT && Number(process.env.PROT)


const devWebpackConfig = merge(baseWebpackConfig, {
    // 开发模式下使用 style-loader
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    {
                        loader: 'css-loader',
                        options: {
                            importLoaders: 1
                        }
                    },
                    'postcss-loader'
                ]
            },
            {
                test: /\.less$/,
                use: [
                    {
                        loader: 'style-loader'
                    },
                    {
                        loader: 'css-loader',
                        options: {
                            importLoaders: 1
                        }
                    },
                    'postcss-loader',
                    {
                        loader: 'less-loader'
                    }
                ]
            },
            {
                test: /\.scss$/,
                use: [
                    {
                        loader: 'style-loader'
                    },
                    {
                        loader: 'css-loader',
                        options: {
                            importLoaders: 1
                        }
                    },
                    {
                        loader: 'postcss-loader'
                    },
                    {
                        loader: 'sass-loader'
                    }
                ]
            },
            {
                test: /\.styl$/,
                use: [
                    'style-loader',
                    {
                        loader: 'css-loader',
                        options: {
                            importLoaders: 1
                        }
                    },
                    'postcss-loader',
                    'stylus-loader'
                ]
            },
        ]
    },
    devtool: config.dev.devtool,
    devServer: {
        contentBase: path.join(__dirname, "../dist"),
        clientLogLevel: 'warning', // 在开发工具(DevTools)的控制台将显示警告消息
        historyApiFallback: { // h5的history API处理，任意的 404 响应都可能需要被替代为 index.html。
            rewrites: [
                { from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'index.html') },
            ],
        },
        hot: true, // 启动热更新模式
        compress: true, // 一切服务都启动后，就会使用gzip压缩代码
        host: HOST || config.dev.host, // 默认是localhost
        port: PORT || config.dev.port, // 指定要监听的端口号
        open: config.dev.autoOpenBrowser, // 是否自动打开默认浏览器
        overlay: config.dev.errorOverlay //  当出现编译器错误或警告时，在浏览器中显示全屏叠加,覆盖到浏览器的项目页面的上方
            ? { warnings: false, errors: true }
            : false,
        publicPath: config.dev.assetsPublicPath,
        // 服务器假设运行在 http://localhost:8080 并且output.filename 被设置为bundle.js默认。
        // publicPath是"/"，所以你的包（束）通过可以 http://localhost:8080/bundle.js 访问。
        // 如果config中的index.js dev对象的中的assertsPublicPath设置为"/asserts/"
        // 那么文件打开后将通过 http://localhost:8080/asserts/来进行访问
        proxy: config.dev.proxyTable,
        //  如果你有单独的后端开发服务器API，并且希望在同域名下发送API请求，
        //  那么代理某些URL将很有用.简称就是API代理,中间件  需引入 http-proxy-middleware
        quiet: true,
        // 启用quiet后，除了初始启动信息之外的任何内容都不会被打印到控制台。
        // 这也意味着来自的WebPack的错误或警告在控制台不可见。
        watchOptions: {
            poll: config.dev.poll,
        }
    },
    plugins: [
        new webpack.DefinePlugin({
            'process.env': require('../config/dev.env.js')
        }),
        new webpack.HotModuleReplacementPlugin(), //模块热更新,修改文件的内容，允许在运行时更新各种模块，而无需进行完全刷新。
        new webpack.NamedModulesPlugin(),        // 当进行热更新时，相关文件名会被展示出来
        new webpack.NoEmitOnErrorsPlugin(),     // 跳过编译时出错的代码并记录，使编译后运行时的包不会发生错误。 
        new HtmlWebpackPlugin({                // 提取 html
            filename: 'index.html',
            template: 'index.html',
            inject: true
        })
    ]
})

// config/index.js

'use strict';
const path = require('path');

module.exports = {
    // 开发模式下的配置
    dev: {
        assetsPublicPath: '/',
        assetsSubDirectory: 'static',
        useEslint: false,
        proxyTable: {},         // 代理示例： proxy: [{context: ["/auth", "/api"],target: "http://localhost:3000",}]
        host: 'localhost',      // 这个可以被process.env.HOST重写
        port: 8080,             // process.env.PORT重写  在端口空闲的情况下
        autoOpenBrowser: false, // 是否自动打开浏览器
        errorOverlay: true,     // 是否出现编译器错误或者警告，在浏览器显示全屏叠加，覆盖到浏览器页面上面
        notifyOnErrors: true,   // 是否允许窗口弹出错误信息
        poll: false,            // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
        devtool: 'cheap-module-eval-source-map', 
        cssSourceMap: true      // 开发环境下，显示 cssSourceMap
    },
    // 生产模式下的配置
    build: {
        assetsRoot: path.resolve(__dirname, '../dist'),
    }
}

求大神帮帮忙，非常谢谢！