一。express+webpack搭建前端项目（主要说解决的两个问题）

1. 使用express框架搭建项目
   安装– 才能使用express
   

   npm install express-generator -g

使用express创建项目

express myproject (项目的名称)

运行

npm install
npm start

浏览器localhost:3000 就可查看express项目

1. 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的热启动等，已经看了，但是还能往项目上加~