使用express应用生成器构建项目使用以下命令安装生成器$npminstallexpress-generator-g使用-h查看命令选项$express-hUsage:express[options][dir]Options:-h,--help输出使用信息--version输出版本号-e,--ejs添加ejs引擎支持--hbs添加handlebars引擎支持--pug添加pug引擎支持-H,--hogan添加hogan.js引擎支持-v,--view添加视图支持(ejs|hbs|hjs|jade|pug|twig|vash)(默认为jade)-c,--cssaddstylesheetsupport(less|stylus|compass|sass)(defaultstoplaincss)--gitadd.gitignore-f,--force在非空目录上强制创建名为node-sticky$express的express应用程序--pug--css=lessnode-sticky//我默认安装了less和pug模板引擎安装依赖$cdnode-sticky$npminstallstartapplication$npmstart>node-sticky@0.0.0start/node-sticky>node./bin/www在浏览器中输入localhost:3000可以看到欢迎界面当前目录结构├──app.js├──bin│└──www├──package.json├──public│├──images│├──javascripts│└──stylesheets│└──style.css├──routes│├──index.js│└──users.js└──views├──错误。pug├──index.pug└──layout.pug添加src目录，并配置相应的webpack。我们把前端的源码放在src目录下，使用webpack打包到node的public目录下。添加后的目录结构为：├──app.js├──bin|└──www├──package-lock.json├──package.json├──public|├──图片|├──javascripts|└──样式表|└──style.less├──routes|├──index.js|└──users.js├──src//前端源码目录|├──js||├──app//webpack入口目录|||└──index.js||├──lib//一些工具目录|||——模块//js模块|├──less//少目录|└──网页包。config.js//webpack配置文件└──views├──error.pug├──index.pug└──layout.pug我用mac的tree命令生成目录树，具体命令：tree-l4--ignore=node_modules，忽略依赖目录。在配置webpack配置之前，需要安装webpack依赖$npminstallwebpack--save-dev然后简单的配置webpack入口文件和出口文件。让webpack=require('webpack')letpath=require('path')module.exports={entry:path.join(__dirname,'/js/app/index.js'),output:{path:路径。join(__dirname,'../public'),filename:'js/index.js'}}在终端运行webpack$cdsrc$webpackVersion:webpack4.3.0Time:265msBuiltat:2018-3-2905:21:58AssetSizeChunksChunkNamesjs/index.js676bytes0[emitted]mainEntrypointmain=js/index.js[0]./js/module/b.js36bytes{0}[built][1]./js/module/a.js36bytes{0}[built][2]./js/app/index.js65bytes{0}[built]配置中的警告尚未设置“模式”选项。将“模式”选项设置为“开发”或“生产”以启用此环境的默认值。~~~4。最后给个警告，添加webpack运行的环境，以后再添加就好了~~~$webpack--modedevelopment~~~配置package.json的script脚本，但是我们总不能在src里面执行吧，我们需要在根目录下执行，必须使用package.json中srcipt字段中的所有脚本命令。--config指定需要配置webpack的脚本文件。//package.json{"name":"node-sticky","version":"0.0.0","private":true,"scripts":{"start":"node./bin/www","webpack":"webpack--config=src/webpack.config.js--mode=development"},"dependencies":{"cookie-parser":"~1.4.3","debug":"~2.6.9","express":"~4.16.0","http-errors":"~1.6.2","less-middleware":"~2.2.1","morgan":"~1.9.0","pug":"2.0.0-beta11","webpack":"^4.3.0"}}然后进入一个目录，执行npmrunwebpack，会发现报错。$cd..$npmrunwebpack>node-sticky@0.0.0webpack/Users/lanbo/projects/node-sticky>webpack--config=src/webpack.config.jsCLI搬进了一个单独的包：webpack-cli.除了webpack本身，请安装'webpack-cli'以使用CLI。->使用npm时：npminstallwebpack-cli-D->使用yarn时：yarnaddwebpack-cli-DnpmERR！代码ELIFECYCLEnpm错误！错误号1npm错误！node-sticky@0.0.0webpack:`webpack--config=src/webpack.config.js`npm错误！退出状态1npmERR!npmERR!在node-sticky@0.0.0webpackscript.npmERR失败！这可能不是npm的问题。上面可能有额外的日志输出。npmERR！可以在以下位置找到此运行的完整日志：npmERR！/Users/lanbo/.npm/_logs/2018-03-28T21_33_04_687Z-debug.log根据报错内容需要安装webpack-cli，那就照着做吧。$npminstallwebpack-cli--save-dev再次执行，发现成功了，哈哈哈~~那么问题来了，总不能每次都手动去webpack吧，有工具可以自动打包。只要有这个工具--onchange.$npminstallonchange--save-dev配置脚本$"watch":"onchange'src/**/*.js''src/**/*.less'--npmrunwebpack”在另一个终端，启动脚本不会管它，js和less文件有变化会自动打包。$npmrunwatch一点点记录，一步步成长，加油~~~~
