新手学习react和webpack,参照本站一个大神的代码编写,使用webpack2
使用了html-webpack-plugin插件,在命令行输入 webpack后可以生成一个index.html
但是使用webpack自带devServer无法生成相关的文件,打开网页显示的是项目目录
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);
第一次在这个社区发言,有啥错误大家尽管提,谢谢各位大神了