使用webpack -v 4.39.3打包的项目在本地打开是空白

Question

const path = require('path')
const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {
    //指定入口，表示webpack要打包哪个文件
    entry: path.join(__dirname, './src/main.js'),
    //指定出口，表示打包好的文件输出到哪个目录
    output: {
        // publicPath: './',
        path: path.join(__dirname, './dist'),
        //指定输出文件的名称
        filename: 'ets.js'
    },
    module: {
        rules: [{
                test: /\.vue$/,
                loader: 'vue-loader'
            },
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    'css-loader'
                ]
            },
            {
                test: /\.(jpg|png|svg|ttf)$/,
                use: 'url-loader'
            },
            { test: /\.(png|jpg|gif|eot|woff|ttf|svg|webp|PNG)(\?\S*)?$/, loader: 'file-loader' }
        ]
    },
    mode: "development", //打包模式
    plugins: [
        new VueLoaderPlugin()
    ]
}

这是打包好的文件

运行结果及报错内容

我的解答思路和尝试过的方法

百度到的基本都是webpack以前的版本

求解决一下

Answer 1

打开本地服务器,把dist文件下的文件放在WWW目录,在通过http://localhost/打开