使用html-webpack-plugin插件打包的文件出不来

#1

新手学习react和webpack,参照本站一个大神的代码编写,使用webpack2
使用了html-webpack-plugin插件,在命令行输入 webpack后可以生成一个index.html
但是使用webpack自带devServer无法生成相关的文件,打开网页显示的是项目目录

github项目地址

webpack.config.js

var path = require('path');
var webpack = require("webpack");
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: {
        main: "./src/App.jsx",
        vendor: 'moment'
    },
    output: {
        path: __dirname + "/dist",
        publicPath: './dist',
        filename: '[chunkhash].[name].js'
    },
    module: {
        rules: [{
            test: /\.js$/,
            use: [{
                loader: "babel-loader",
                options: {
                    presets: ["es2015"]
                }
            }]
        }, {
            test: /\.css$/,
            exclude: /node_modules/,
            use: ExtractTextPlugin.extract({
                loader: 'css-loader',
                options: {
                    sourceMap: true
                }
            })
        }, {
            test: /\.(eot|woff|svg|ttf|woff2|gif|appcache)(\?|$)/,
            exclude: /node_modules/,
            loader: 'file-loader?name=[name].[ext]'
        }, {
            test: /\.html$/,
            exclude: /node_modules/,
            loader: "raw-loader"
        }]
    },
    plugins: [
        new HtmlWebpackPlugin({
            title: 'yezhenghao',
            hash: true,
            template: './src/Template/index.html',
            filename: '../index.html' //相对于path
        })
    ],
    resolve: {
        extensions: [".js", ".jsx"]
    }
};

server.js

var webpack = require('webpack')
var WebpackDevServer = require('webpack-dev-server')
var config = require('./webpack.config')

var proxy = [{
    path: '/api/*',
    target: 'https://cnodejs.org',
    host: 'cnodejs.org'
}];

var server = new WebpackDevServer(webpack(config), {
    publicPath: config.output.publicPath,
    proxy: proxy,
    stats: true,
});

server.listen(3000);

第一次在这个社区发言,有啥错误大家尽管提,谢谢各位大神了:grinning:

#3

在server.js里面使用的是webpack-dev-server,这个是不会生成具体的文件中,所有的东西都只会在内存中。

#5

那我该怎么让他展现出来,直接打开localhost:3000页面的话是一个文件列表:blush:

#6

HtmlWebpackPlugin的filename给绝对路径或者直接写’index.html’试试