一。express+webpack搭建前端项目(主要说解决的两个问题)
2018-03-19 10:03
846 查看
使用express框架搭建项目
安装– 才能使用express
npm install express-generator -g
使用express创建项目
express myproject (项目的名称)
运行
npm install
npm start
浏览器localhost:3000 就可查看express项目
express项目中添加 webpack
新建webpack.config.js
在app.js中加入webpack的配置,贴上整个app.js
3 .package.json 展示需要安装的包,有部分暂时用不到的包,暂时加入,以后会用~
其实这三部分,网上很多教程,不用做太多介绍,本文主要重点是说,自己开始学习搭建项目时,遇到的两个问题:
1. 照着教程一步步下来后, npm install npm start ,发现报错。
贴出错误的部分内容:
百度了好久,试了好多方法,都是不太行,偶然发现一位睿智的朋友,说是因为webpack的版本问题,好吧好吧,那我就试了一下。在package.json 中修改webpack的对应版本。 运行npm start 还是不行啊。难受
那得怎么办,继续百度,又一位睿智的大佬提了一句,删除node_modules,重新 npm install ,好吧,你说了我就照做,来一遍,运行,成功~~
emmmmmmm,小新手,成功了就好,都值了
后面还应该加上webpack的热启动等,已经看了,但是还能往项目上加~
安装– 才能使用express
npm install express-generator -g
使用express创建项目
express myproject (项目的名称)
运行
npm install
npm start
浏览器localhost:3000 就可查看express项目
express项目中添加 webpack
新建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'; module.exports={ entry:{ main:'./frame/index.js', }, output:{ path:path.resolve(__dirname, 'build'),//__dirname+'/build' filename:'bundle.js',//[name]-bundle.js publicPath:publicPath }, //html页面扩展 plugins:[ new HtmlWebpackPlugin({ template:'./public/index.html', filename:'index.html'//./views/index.html }) ], //loader加载器 module:{ rules: [{ test: /\.(js|jsx)$/, exclude: /node_modules/, use: { loader: 'babel-loader', options: { presets: ['es2015', 'react'], }, }, }], // webpack版本不同,写法不同 rules和loaders }, resolve: { extensions: ['.js', '.jsx'] }, resolveLoader: { modules: ['node_modules', 'bower_components'], } }
在app.js中加入webpack的配置,贴上整个app.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 app = express(); //在express中加载webpack模块 var webpack = require('webpack'); //webpack的配置文件 var webpackConfig = require('./webpack.config.js'); //启动webpack的方法webpack(配置文件对象,回调) var compiler = webpack(webpackConfig,function(err,stats){ console.log(stats.toString({ colors:true })); compiler.watch({ aggregateTimeout: 300, poll: undefined },function(err,stats){ }) }); // view engine setup app.set('views', path.join(__dirname, 'views')); //替换为html模版 app.engine(".html",require('ejs').renderFile);//ejs.__express 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('/', index); app.use('/users', users); // 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;
3 .package.json 展示需要安装的包,有部分暂时用不到的包,暂时加入,以后会用~
{ "name": "knowbase", "version": "0.0.0", "private": true, "scripts": { "start": "node ./bin/www" }, "dependencies": { "body-parser": "~1.18.2", "cookie-parser": "~1.4.3", "css-loader": "^0.28.11", "debug": "~2.6.9", "ejs": "~2.5.6", "expose-loader": "^0.7.3", "express": "~4.15.2", "extract-text-webpack-plugin": "^2.1.0", "file-loader": "^0.11.1", "html-loader": "^0.4.5", "html-webpack-plugin": "^2.28.0", "jade": "~1.11.0", "jquery": "^3.2.1", "morgan": "~1.8.1", "node-sass": "^4.5.3", "resolve-url-loader": "^2.0.2", "sass-loader": "^6.0.5", "serve-favicon": "~2.4.2", "style-loader": "^0.18.1", "url": "^0.11.0", "url-loader": "^0.5.8", "webpack": "^2.6.1", "webpack-cli": "^2.0.11", "webpack-dev-server": "^2.11.1" }, "devDependencies": { "babel": "^6.23.0", "babel-cli": "^6.26.0", "babel-core": "^6.26.0", "babel-loader": "^7.1.4", "babel-preset-env": "^1.6.1", "babel-preset-es2015": "^6.24.1", "babel-preset-react": "^6.24.1", "react": "^16.2.0", "react-dom": "^16.2.0", "webpack": "^2.6.1", "webpack-bundle-tracker": "^0.3.0" } }
其实这三部分,网上很多教程,不用做太多介绍,本文主要重点是说,自己开始学习搭建项目时,遇到的两个问题:
1. 照着教程一步步下来后, npm install npm start ,发现报错。
贴出错误的部分内容:
WARNING in ./node_modules/express/lib/view.js 79:29-41 Critical dependency:
WARNING in ../~/express/lib/view.js Critical dependencies: 78:29-56 the request of a dependency is an expression @ ../~/express/lib/view.js 78:29-56 ERROR in ../~/express/lib/request.js Module not found: Error: Cannot resolve module 'net' in /Users/Dynopia/Development/DS_Stalker_Frontend/node_modules/express/lib @ ../~/express/lib/request.js 18:11-25 ERROR in ../~/express/lib/view.js Module not found: Error: Cannot resolve module 'fs' in /Users/Dynopia/Development/DS_Stalker_Frontend/node_modules/express/lib @ ../~/express/lib/view.js 18:9-22 ERROR in ../~/express/~/send/index.js Module not found: Error: Cannot resolve module 'fs' in /Users/Dynopia/Development/DS_Stalker_Frontend/node_modules/express/node_modules/send @ ../~/express/~/send/index.js 25:9-22 ERROR in ../~/express/~/etag/index.js Module not found: Error: Cannot resolve module 'fs' in /Users/Dynopia/Development/DS_Stalker_Frontend/node_modules/express/node_modules/etag @ ../~/express/~/etag/index.js 22:12-25 ERROR in ../~/express/~/send/~/destroy/index.js Module not found: Error: Cannot resolve module 'fs' in /Users/Dynopia/Development/DS_Stalker_Frontend/node_modules/express/node_modules/send/node_modules/destroy @ ../~/express/~/send/~/destroy/index.js 1:17-30 ERROR in ../~/express/~/send/~/mime/mime.js Module not found: Error: Cannot resolve module 'fs' in /Users/Dynopia/Development/DS_Stalker_Frontend/node_modules/express/node_modules/send/node_modules/mime @ ../~/express/~/send/~/mime/mime.js 2:9-22
百度了好久,试了好多方法,都是不太行,偶然发现一位睿智的朋友,说是因为webpack的版本问题,好吧好吧,那我就试了一下。在package.json 中修改webpack的对应版本。 运行npm start 还是不行啊。难受
那得怎么办,继续百度,又一位睿智的大佬提了一句,删除node_modules,重新 npm install ,好吧,你说了我就照做,来一遍,运行,成功~~
emmmmmmm,小新手,成功了就好,都值了
后面还应该加上webpack的热启动等,已经看了,但是还能往项目上加~
相关文章推荐
- vue-cli webpack模板项目搭建及打包时路径问题的解决方法
- webpack + vue 项目 自定义 插件 解决 前端 JS 版本 更新 问题
- 二。express+webpack+react (主要解决使用jsx文件的问题)
- 用vue+webpack搭建的前端项目结构
- express+webpack+vue.js项目搭建
- express+webpack+react搭建项目
- 让Vue-cli生成vue+webpack的项目为vue1.0版本以及端口占用问题解决办法
- 使用webpack2.0 搭建前端项目
- webpack搭建前端项目
- 解决vue-cli + webpack 新建项目出错的问题
- 【问题解决】Maven搭建Web项目中org.apache.ibatis.binding.BindingException: Invalid bound statement (not found)问
- VUE webpack前端代理解决跨域问题
- 解决在vue项目中webpack打包后字体不生效的问题
- 使用webpack-dev-server设置反向代理解决前端跨域问题
- vue-cli webpack模板项目搭建以及打包时路径问题的解答
- vue-cli webpack模板项目搭建以及打包时路径问题的解答
- 使用vue-lazyload解决Vue+Webpack项目的图片加载问题
- [React项目总结] 基于 webpack 搭建前端工程基础篇
- 解决vue-cli项目webpack打包后iconfont文件路径的问题
- 在做j2ee的web项目,前端研发的时候,在写html、jsp、JavaScript代码的时候,卡壳了,特别是JavaScript,f12,没有解决不了的问题