前端四react+redux脚手架搭建.docx

初始化项目基于nodejscd D:\code_fe\testcnpm init新建index.html!DOCTYPE htmlhtml lang=enheadmeta charset=UTF-8titlereact_redux/title/headbodydiv id=rootHello World!/div/body/htmlexpresnodejs web framework web框架/zh-cn//zh-cn/cnpm install express --save-dev新建server.jsvar app = new (require(express))()var port = 9100app.get(/, (req, res) = { res.sendFile(__dirname + /index.html)})app.listen(port, error = { if (error) { console.error(error) } else { (Open up http://localhost:%s/ in your browser., port) }})node server.jspackage.json增加start命令babelBabel is a JavaScript compiler. 将babel语法编译成普通es2015(es6)https://babeljs.io/https://babeljs.io/cnpm install babel-core babel-loader babel-preset-es2015 babel-preset-react babel-preset-react-hmre --save-dev新建.babelrc增加配置内容{ presets: [es2015, react], env: { development: { presets: [react-hmre] } }}webpackwebpack the flexible module bundlerhttps://webpack.github.io/https://webpack.github.io/cnpm install webpack webpack-dev-middleware webpack-hot-middleware --save-dev新建webpack.config.jsvar path = require(path)var webpack = require(webpack)module.exports = { devtool: cheap-module-eval-source-map, entry: [ webpack-hot-middleware/client, ./index ], output: { path: path.join(__dirname, dist), filename: bundle.js, publicPath: /static/ }, plugins: [ new webpack.optimize.OccurenceOrderPlugin(), new webpack.HotModuleReplacementPlugin() ], module: { loaders: [ { test: /\.js$/, loaders: [ babel ], exclude: /node_modules/, include: __dirname } ] }}新建index.jsconst rootEl = document.getElementById(root);rootEl.innerText = haha!修改server.jsvar webpack = require(webpack)var webpackDevMiddleware = require(webpack-dev-middleware)var webpackHotMiddleware = require(webpack-hot-middleware)var config = require(./webpack.config)var app = new (require(express))()var port = 9100var compiler = webpack(config)app.use(webpackDevMiddleware(compiler, { noInfo: true, publicPath: config.output.publicPath }))app.use(webpackHotMiddleware(compiler))app.get(/, (req, res) = { res.s