- 使用express框架搭建项目
安装– 才能使用express
npm install express-generator -g
使用express创建项目 express myproject (项目的名称)
运行
npm install浏览器localhost:3000 就可查看express项目
npm start
- express项目中添加 webpack
/**
* 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'],
}}
【一。express+webpack搭建前端项目（主要说解决的两个问题）】在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-56ERROR 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-25ERROR 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-22ERROR 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-22ERROR 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-25ERROR 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-30ERROR 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的热启动等，已经看了，但是还能往项目上加~
