您的位置:首页 > Web前端 > React

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

2018-03-20 18:15 676 查看
折磨了我整整两天啊,难受难受,买盒牛奶安慰下,来记录下问题。

在之前的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'],
}

}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: