二。express+webpack+react (主要解决使用jsx文件的问题)
2018-03-20 18:15
676 查看
折磨了我整整两天啊,难受难受,买盒牛奶安慰下,来记录下问题。
在之前的express+webpack项目基础上,增加react,稍后我加上序号。
开始。
主要还是webpack和app.js 的配置
首先是webpack配置:
多入口配置,我想每个js对应打包成一个文件,而不是整个成为一个文件。
这个写法可以用,但不是最合理的吧,刚刚开始写,测试成功就没有继续优化。后续继续整理。
主要修改内容是:
再看app.js 这里面是主要配置:
首先是使用ejs模板引擎。最最最大的问题就是 我不知道怎么使用jsx文件啊。在这改了又测,测了又改。
//引入ejs模块
var ejs = require(‘ejs’);
嗯,,build是我的webpack打包后文件夹,在想,既然用了webpack了,就不能让请求再跳转到未打包的文件了吧,不然不就没用处了嘛。这么设置是可行的。
刚刚实现使用jsx文件的功能。还有很多需要改进的地方,暂时先这样记录下…
嗯,,,发现修改的地方很少啊,但是刚刚接触,不会是真的难弄啊。加油加油~
下面这是 app.js 和 webpack.config.js的全部配置
webpack.config.js
在之前的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'], } }
相关文章推荐
- 解决react+webpack 打包后文件过大的问题
- react&webpack使用css、less && 安装原则 --- 从根本上解决问题。
- react&webpack使用css、less && 安装原则 --- 从根本上解决问题。
- 一。express+webpack搭建前端项目(主要说解决的两个问题)
- webpack-dev-server搭配react-router找不到资源文件的问题解决
- webpack:使用expose-loader 解决第三方库的插件依赖问题
- Webpack问题解决:Can't resolve 'react'
- 彻底解决 webpack 打包文件体积过大问题
- 解决webpack打包文件过大的问题
- 【webpack打包成功,但是在dist文件js里没有出现相对应的文件 】问题解决
- 使用webpack打包react项目中遇到的问题(二)
- 使用autoit解决webdriver文件上传问题
- vue+webpack解决css引用图片打包后找不到资源文件的问题
- 简单设置,解决使用webpack前后端跨域发送cookie的问题
- vue-cli项目webpack打包后iconfont文件路径问题解决
- 从零开始-使用React+Webpack+Nodejs+Express快速构建项目
- 使用express、react、webpack打包、socket.io、mongodb、ant.design、less、es6实现聊天室
- Android使用webview加载网页,解决上传文件适配3.0、4.0、5.0手机存在的问题。
- WebPack系列:Webpack编译的代码如何在tomcat中使用时静态资源路径不对的问题如何解决
- 简单设置,解决使用webpack前后端跨域发送cookie的问题