当我运行以下脚本npm run dev
localhost输出是当前文件结构。相反,我需要它来呈现欢迎组件。我试图找出根本原因,无论是webpack.config.js,工程建筑等,这里是我webpack.config.js文件LocalHost8080错误页面
var webpack = require('webpack');
var path = require('path');
var ExtractTextPLugin = require("extract-text-webpack-plugin");
module.exports = {
context: path.join(__dirname, "src"),
entry: "./main.js",
module: {
loaders: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['react', 'es2015']
}
},
{
test: /\.scss$/,
use: ExtractTextPLugin.extract({
fallback: 'style-loader',
use:['css-loader', 'sass-loader'],
publicPath: './dist'
})
}
]
},
output: {
path: path.resolve(__dirname, "./dist"),
filename: "[name].bundle.js",
},
devServer: {
contentBase: path.join(__dirname, "./dist"),
hot: true,
inline: true,
},
plugins:[
new webpack.HotModuleReplacementPlugin()
]
};
的package.json开发“的WebPack-DEV-服务器--inline --content基DIST/--hot”
项目架构
Main.js
import React from "react";
import ReactDOM from "react-dom";
import Welcome from "./components/Welcome";
const app = document.getElementById('app');
ReactDOM.render(<Welcome/>, app);
Welcome.js
import React from "react";
export default class Welcome extends React.Component {
render() {
return (
<div>
<h4>Welcome Component</h4>
</div>
);
}
}
main.html中
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>React App</title>
</head>
<body>
<div id="app"></div>
<script src="main.bundle.js"></script>
</body>
</html>
本地主机输出
终端
你可以在你的main.html中包含什么吗? –
你没有在你的main.html中包含你的包文件? –
也可以包含你的server.js(我假设你使用的是快速服务器)。 –