我有一个React/Node/Express应用程序,并且正在使用Webpack进行构建。
目前,目录的结构如下:
node_modules
public
app
main.js
main.map.js
index.html
src
client
components
Home.js
Header.js
Root.js
User.js
main.js
server
views
index.html
index.js
package.json
webpack.config.js
这是我的webpack.config.js文件。
var path = require("path");
var DIST_DIR = path.resolve(__dirname, "public");
var SRC_DIR = path.resolve(__dirname, "src");
var config = {
entry: SRC_DIR + "/client/main.js",
output: {
path: DIST_DIR + "/app",
filename: "main.js",
publicPath: "/app"
},
module:{
loaders: [
{
test: /\.js?/,
include: SRC_DIR,
loader: "babel-loader",
query:{
presets:["react", "es2015", "stage-2"]
}
}
]
}
};
module.exports = config;
这是我的 package.json 文件
{
"name": "react-webpack",
"version": "1.0.0",
"description": "",
"main": "/src/server/index.js",
"scripts": {
"start": "npm run build",
"build": "webpack -d && xcopy \"src/server/views/index.html\" \"public\" /F /Y && webpack-dev-server --content-base src/ --inline --hot --history-api-fallback",
"build:prod": "webpack -p && xcopy \"src/server/views/index.html\" \"public/\" /F /Y"
},
"author": "",
"license": "ISC",
"dependencies": {
"react": "^15.4.1",
"react-dom": "^15.4.1",
"react-router": "^3.0.0"
},
"devDependencies": {
"babel-core": "^6.18.2",
"babel-loader": "^6.2.8",
"babel-preset-es2015": "^6.18.0",
"babel-preset-react": "^6.16.0",
"babel-preset-stage-2": "^6.18.0",
"body-parser": "^1.15.2",
"express": "^4.14.0",
"jquery": "^3.1.1",
"lodash": "^4.17.2",
"morgan": "^1.7.0",
"pug": "^2.0.0-beta6",
"webpack": "^1.13.3",
"webpack-dev-server": "^1.16.2"
}
}
这行代码有效。我的index.html文件如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>React Basics</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div id="app"></div>
<script src="/app/main.js"></script>
<!--Everything will be bundled in app/mainjs -->
</body>
</html>
当我执行npm start时,应用程序会构建,并且我可以访问
localhost:8080
并查看已加载子组件的index.html。加载的脚本是'app/main.js',内容如下:import React from 'react';
import { render } from 'react-dom';
import {Router, Route, browserHistory, IndexRoute} from "react-router";
//import newly created components
import {Root} from "./components/Root";
import {Home} from "./components/Home";
import {User} from "./components/User";
class App extends React.Component {
render() {
return (
<Router history={browserHistory}>
<Route path={"/"} component={Root}>
<IndexRoute component={Home}/>
<Route path={"user/:id"} component={User}/>
<Route path={"home"} component={Home}/>
</Route>
<Route path={"home"} component={Home}/>
</Router>
);
}
}
render(<App />, window.document.getElementById('app'));
我现在想做的是,不再使用index.html文件,而是使用一个内容完全相同的index.pug文件,并从服务器文件index.js中提供pug模板。你能告诉我如何做到这一点吗?我尝试了一些方法,但弄乱了太多东西,所以又回到了原来的情况。