二。express+webpack+react (主要解决使用jsx文件的问题)

折磨了我整整两天啊，难受难受，买盒牛奶安慰下，来记录下问题。
在之前的express+webpack项目基础上，增加react，稍后我加上序号。

开始。

主要还是webpack和app.js 的配置

首先是webpack配置：
多入口配置，我想每个js对应打包成一个文件，而不是整个成为一个文件。
这个写法可以用，但不是最合理的吧，刚刚开始写，测试成功就没有继续优化。后续继续整理。
主要修改内容是：

entry:{
        index:'./frame/index.js',
        base:'./frame/base.js'
    },
    output:{
        path:path.resolve(__dirname, 'build'),
        filename:'js/[name].js',
    },
    plugins:[
        new HtmlWebpackPlugin({
            template:'./frame/index.html',
            filename:'index.html',
            chunks:['index']
        }),
        new HtmlWebpackPlugin({
            template:'./frame/index.html',
            filename:'base.html',
            chunks:['base']
        })
    ],

再看app.js 这里面是主要配置：
首先是使用ejs模板引擎。最最最大的问题就是 我不知道怎么使用jsx文件啊。在这改了又测，测了又改。
//引入ejs模块
var ejs = require(‘ejs’);

// view engine setup
app.set('views', path.join(__dirname, 'build'));
//替换为html模版
app.engine("html",ejs.__express);//ejs.__express require('ejs').renderFile
app.set('view engine', 'html');//jade

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

嗯，，build是我的webpack打包后文件夹，在想，既然用了webpack了，就不能让请求再跳转到未打包的文件了吧，不然不就没用处了嘛。这么设置是可行的。

刚刚实现使用jsx文件的功能。还有很多需要改进的地方，暂时先这样记录下…
嗯，，，发现修改的地方很少啊，但是刚刚接触，不会是真的难弄啊。加油加油~

下面这是 app.js 和 webpack.config.js的全部配置

var express = require('express');
var path = require('path');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');
//引入ejs模块
var ejs = require('ejs');
var index = require('./routes/index');
var users = require('./routes/users');
var base = require('./routes/base');

var app = express();

//在express中加载webpack模块
var webpack = require('webpack');
//webpack的配置文件
var webpackConfig = require('./webpack.config.js');
//启动webpack的方法webpack(配置文件对象，回调)
var compiler = webpack(webpackConfig,function(err,stats){
    //我们可以在stats中看到webpack打包的过程与命令行执行的结果是一样的
    console.log(stats.toString({
        colors:true
    }));
    //通过compiler对象可以开启watch模式来监听原文件的变化，如果原文件发生改变就会
    //出发webpack的重新打包回调函数内部与打包函数是一样的
    compiler.watch({
        aggregateTimeout: 300,
        poll: undefined
    },function(err,stats){

    })
});

// view engine setup
app.set('views', path.join(__dirname, 'build'));
//替换为html模版
app.engine("html",ejs.__express);//ejs.__express require('ejs').renderFile
app.set('view engine', 'html');//jade

// uncomment after placing your favicon in /public
//app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')));
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
//app.use(express.static(path.join(__dirname, 'public')));
app.use(express.static(path.join(__dirname, 'build')));
app.use('/', index);
app.use('/users', users);
app.use('/base', base);

// catch 404 and forward to error handler
app.use(function(req, res, next) {
  var err = new Error('Not Found');
  err.status = 404;
  next(err);
});

// error handler
app.use(function(err, req, res, next) {
  // set locals, only providing error in development
  res.locals.message = err.message;
  res.locals.error = req.app.get('env') === 'development' ? err : {};

  // render the error page
  res.status(err.status || 500);
  res.render('error');
});

module.exports = app;

webpack.config.js

/**
 * Created by ngm on 2018/3/18.
 */
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const publicPath = '/';
const buildPath = 'build';
//引入了html-webpack-plugin模块来构建动态的html页面7

module.exports={
    //js入口文件我们默认以多入口为例子，其他用法可以关注我的文章后续会发出来
    entry:{
        index:'./frame/index.js',
        base:'./frame/base.js'
    },
    //打包输出的js文件位置［name］会按照模块的名称自动生成两个js文件
    output:{
        //这里没有使用 path模块来构建目录的路径有需要的可以单独修改
        path:path.resolve(__dirname, 'build'),//__dirname+'/build'
        filename:'js/[name].js',//[name]-bundle.js
        //publicPath非常重要它可以放置页面的依赖关系在生成之后出现路径问题'http://localhost:3000'
        //publicPath:publicPath
    },

    //html页面扩展
    plugins:[
        new HtmlWebpackPlugin({

            //这个是根据哪个页面模版来打包文件
            template:'./frame/index.html',
            //这个是生成的html文件名，我们把它直接放在views中覆盖原有的欢迎页面
            filename:'index.html',//./views/index.html
            //chunks代表当前页面需要引入上述哪个依赖文件，我们直接将两个都引入
            //chunks:['index']
        }),
        new HtmlWebpackPlugin({

            //这个是根据哪个页面模版来打包文件
            template:'./frame/index.html',
            //这个是生成的html文件名，我们把它直接放在views中覆盖原有的欢迎页面
            filename:'base.html',//./views/index.html
            //chunks代表当前页面需要引入上述哪个依赖文件，我们直接将两个都引入
            chunks:['base']
        })
    ],

    //loader加载器
    module:{
        /*rules: [ //配置加载器 旧版用loaders
            {
                test: /\.js$/, //配置要处理的文件格式，一般使用正则表达式匹配
                loader: 'babel-loader', //使用的加载器名称
                query: { //babel的配置参数，可以写在.babelrc文件里也可以写在这里
                    presets: ['env', 'react']
                }
            },
            {
                test: /\.jsx?$/,
                exclude: /node_modules/,
                loader: 'babel-loader',
                query: {
                    presets: ['env', 'react']
                }
            },
            {
                test: /\.css/,
                loader: 'style-loader!css-loader'
            },
            {
                test: [/\.gif$/, /\.jpe?g$/, /\.png$/],
                loader: 'url-loader',
                options: {
                    limit: 10000, //1w字节以下大小的图片会自动转成base64
                },
            }


        ],*/
        rules: [{
            test: /\.(js|jsx)$/,
            exclude: /node_modules/,
            use: {
                loader: 'babel-loader',
                options: {
                    presets: ['es2015', 'react'],
                },
            },
        },
            {   //css加载器
                test:/\.css$/,
                loader:'style-loader!css-loader'
            }],



        // webpack版本不同，写法不同  rules和loaders
        /*rules:[
            {   //css加载器
                test:/\.css$/,
                loader:'style-loader!css-loader'
            },
            {
                test:/\.js/,
                loader:'babel-loader'
            },
            {   //html加载器（html－webpack－plugin默认以ejs加载页面防止报错我们需要html加载器）
                test:/\.html$/,
                loader:'html-loader'
            }
        ]*/
    },
    resolve: {
        extensions: ['.js', '.jsx']
    },
    resolveLoader: {
        modules: ['node_modules', 'bower_components'],
    }

}