使用express应用生成器搭建项目

1. 使用一下命令安装生成器

 $ npm install express-generator -g

2. 使用-h 查看命令选项

$ express -h

  Usage: express [options][dir]

  Options:

    -h, --help          output usage information
        --version       output the version number
    -e, --ejs           add ejs engine support
        --hbs           add handlebars engine support
        --pug           add pug engine support
    -H, --hogan         add hogan.js engine support
    -v, --view <engine> add view <engine> support (ejs|hbs|hjs|jade|pug|twig|           vash) (defaults to jade)
    -c, --css <engine>  add stylesheet <engine> support (less|stylus|compass|           sass) (defaults to plain css)
        --git           add .gitignore
    -f, --force         force on non-empty directory

3. 创建名为node-sticky的express应用程序

$ express -f -e//安装了ejs模板引擎

4. 安装依赖

$ cd node-sticky
$ npm install

5. 启动应用程序

$ npm start

> node-sticky@0.0.0 start /node-sticky
> node ./bin/www

6. 在浏览器输入localhost:3000 就可以看到欢迎画面了
7. 目前的目录结构

├── app.js
├── bin
│   └── www
├── package.json
├── public
│   ├── images
│   ├── javascripts
│   └── stylesheets
│       └── style.css
├── routes
│   ├── index.js
│   └── users.js
└── views
    ├── error.ejs
    └── index.ejs //tree是在mac中才有   Windows意会就好

添加src目录，配置相应的webpack

1. 我们把前端的源码放在src目录下，使用webpack打包到node的public目录下面。添加之后的目录结构为

├── app.js
├── bin
|  └── www
├── package-lock.json
├── package.json
├── public             //打包后代码放置处
|  ├── fonts            //放字体  自行添加
|  ├── images
|  ├── javascripts
|  └── stylesheets
|     └── style.less
├── routes
|  ├── index.js
|  └── users.js
├── src                         //前端源码目录
|  ├── js
|  |  ├── app                   //webpack入口目录
|  |  |  └── index.js
|  |  ├── lib                       //一些工具目录
|  |  |—— module             //js模块  外来js
|  ├── less                         //less目录
|  └── webpack.config.js    //webpack配置文件
└── views
   ├── error.ejs
   └── index.ejs

2. 配置webpack

• 1 配置之前需要先安装一下webpack依赖

$ npm install webpack --save-dev

• 2 然后简单配置webpack入口文件和出口文件

let webpack = require('webpack')
let path = require('path')

module.exports = {
    entry: path.join(__dirname,'/js/app/index.js'),//根据自己的实际路径设置  下同
    output: {
        path: path.join(__dirname,'../public'),
        filename: 'js/index.js'
    }
}

• 3 配置package.json的script脚本
  但是我们不能一直在src里面执行，我们要在根目录下执行，所有要使用package.json里面的srcipt字段脚本命令。需要配置webpack的--config指定脚本文件

找到package.json文件

{
  "name": "express-sticky-note",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "start": "node ./bin/www",
    //windows用户添加下面一句代码
    "webpack": "webpack --config ./src/webpack.config.js --mode=development" 
    //遇到后面说的警告  添加 --mode=development

   //mac用户添加
   "webpack": "webpack --configsrc=/webpack.config.js"
   //警告解决方案往下看
  },
  "dependencies": {
    "cookie-parser": "~1.4.3",
    "debug": "~2.6.9",
    "ejs": "~2.5.7",
    "express": "~4.16.0",
    "http-errors": "~1.6.2",
    "morgan": "~1.9.0",
    "webpack": "^4.22.0"
  },
  "devDependencies": {
    "webpack-cli": "^3.1.2"
  }
}

• 4 在终端运行webpack

npm run webpack   //windows 用户

$ cd src
$ webpack        //mac用户

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/

有个警告 找到package.json 添加代码

"webpack": "webpack --config ./src/webpack.config.js --mode=development"  //windows用户

$ webpack --mode development //mac用户运行这段代码即可

在此目录目录执行npm run webpack除了警告 还有一个报错

> express-sticky-note@0.0.0 webpack C:\Users\10479\Desktop\express-sticky-note
> webpack --config ./src/webpack.config.js

The CLI moved into a separate package: webpack-cli.
Please install 'webpack-cli' in addition to webpack itself to use the CLI.
-> When using npm: npm install webpack-cli -D
-> When using yarn: yarn add webpack-cli -D
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! node-sticky@0.0.0 webpack: `webpack --config ./src/webpack.config.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the node-sticky@0.0.0 webpack script.
npm ERR! This is probably not a problem with npm. There is likely additional                logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\10479\AppData\Roaming\npm-cache\_logs\2018-10-22T07_52_27_717Z-debug.log

根据报错内容需要安装webpack-cl 说什么就做什么 乖乖听话

$ npm install webpack-cli --save-dev

• 5 配置script脚本
  先安装

$ npm install --save-dev onchange

然后

$ "watch": "onchange 'src/**/*.js' 'src/**/*.less' -- npm run webpack"  //mac用户 

//windows用户同样在刚刚修改的package.json文件的scripts中添加代码
"watch": "onchange 'src/**/*.js' 'src/**/*.less' -- npm run webpack"

• 6 在另外开一个终端 启动脚本就行了 js和less文件有变动会自动去打包（就是这么智能 工程化）

$ npm run watch

小总结 完毕