-
使用express架構搭建項目
安裝– 才能使用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: ,
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 = ;
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 || );
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 :- Critical dependency:
WARNING in ../~/express/lib/view.js
Critical dependencies:
:- the request of a dependency is an expression
@ ../~/express/lib/view.js :-
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 :-
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 :-
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 :-
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 :-
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 :-
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 :-
百度了好久，試了好多方法，都是不太行，偶然發現一位睿智的朋友，說是因為webpack的版本問題，好吧好吧，那我就試了一下。在package.json 中修改webpack的對應版本。 運作npm start 還是不行啊。難受
那得怎麼辦，繼續百度，又一位睿智的大佬提了一句，删除node_modules,重新 npm install ，好吧，你說了我就照做，來一遍，運作，成功~~
emmmmmmm，小新手，成功了就好，都值了
後面還應該加上webpack的熱啟動等，已經看了，但是還能往項目上加~
![VCD制作全接觸[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)