express + webpack + react 配置

最新推荐文章于 2024-09-01 08:19:21 发布

Babyfaceqian

最新推荐文章于 2024-09-01 08:19:21 发布

阅读量792

点赞数

分类专栏：前端文章标签： express webpack react

本文链接：https://blog.csdn.net/Babyfaceqian/article/details/73522406

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

相关配置文件

package.json

{
  "name": "micandlyle",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "node server.js"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "babel-core": "^6.25.0",
    "babel-loader": "^7.0.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-0": "^6.24.1",
    "body-parser": "^1.17.2",
    "cookie-parser": "^1.4.3",
    "css-loader": "^0.28.4",
    "express": "^4.15.3",
    "extract-text-webpack-plugin": "^2.1.2",
    "react": "^15.6.1",
    "react-dom": "^15.6.1",
    "style-loader": "^0.18.2",
    "webpack": "^3.0.0",
    "webpack-dev-server": "^2.4.5"
  },
  "devDependencies": {
    "webpack-dev-middleware": "^1.10.2",
    "webpack-hot-middleware": "^2.18.0"
  }
}

webpack.config.js

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

var publicPath = 'http://localhost:3000/'; // 确保图片地址引用有效。
var hotMiddlewareScript = 'webpack-hot-middleware/client?reload=true';  //reload = true 参数，如果碰到不能hot reload的情况，就整页刷新。

var config = {
    entry:['./main', hotMiddlewareScript],

    output: {
        path: path.resolve(__dirname, 'public'),
        filename: 'index.js',
        publicPath: publicPath
    },
    devtool: 'source-map',

    // devServer: {
    //     inline: true,
    //     port: 3000
    // },

    module: {
        loaders: [{
            test: /\.js?$/,
            exclude: /node_modules/,
            loader: 'babel-loader',

            query: {
                presets: ['es2015', 'react', 'stage-0']
            }
        },
        {
        test: /\.css$/,
        loader: ExtractTextPlugin.extract({fallback: 'style-loader', use: 'css-loader'})
      },
        ]
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin(),   // webpack-dev-middleware & webpack-hot-middleware 插件配置
        new webpack.NoEmitOnErrorsPlugin(),
        new ExtractTextPlugin("[name].css") // 单独为页面引入css
    ]
}

/** javascript related to entry will hot reload */
if(module.hot) {
    module.hot.accept();
}

module.exports = config;

server.js

    var express = require('express');
var app = express();
var bodyParser = require('body-parser');
// var cookieParser = require('cookie-parser');
var path = require('path');

/** webpack middleware config, 在routes之前 */
var webpack = require('webpack'),
    webpackDevMiddleware = require('webpack-dev-middleware'),
    webpackHotMiddleware = require('webpack-hot-middleware'),
    webpackDevConfig = require('./webpack.config.js');
var compiler = webpack(webpackDevConfig);
// attach to the compiler & the server
app.use(webpackDevMiddleware(compiler, {

    // public path should be the same with webpack config
    publicPath: webpackDevConfig.output.publicPath,
    noInfo: true,
    stats: {
        colors: true
    }
}));
app.use(webpackHotMiddleware(compiler));

// app.use(express.static(path.join(__dirname, 'public')));

app.use(bodyParser.urlencoded({extended: true})); //通常 POST 内容的格式是 application/x-www-form-urlencoded
// app.use(cookieParser);
app.get('/', (req, res) => {
    res.sendFile(path.join(__dirname, 'public/index.html'));
});

app.listen(3000,() => {
    console.log('App is running on port 3000');
});

main.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.js';
ReactDOM.render(<App />, document.getElementById('app'))

App.js

import React from 'react';
class App extends React.Component {
    render() {
        return (
            <div>
                Hello World!!!
            </div>
        );
    }
} export default App;

public/index.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>React App</title>
</head>

<body>
    <div id="app"></div>
    <script src="index.js"></script>
</body>

</html>