‘壹’ 常使用的库有哪些常用的前端开发工具开发过什么应用或组件
很多呀。VB，JAVA，.NET 都是数据库开发的！没数据库的程序都是些小的小程序。玩玩而已！
‘贰’ nginx部署前端纯页面
1.进入nginx配置文件vim .../nginx-1.9.12/conf/nginx.conf。
如上图所示：第一个红框中的内容就是应用服务器的地址；第二个红框中的内容就是前端包的位置。
此时，配置文件已经准备完毕。这个包和端口可以存在多个。
2.进入.../nginx-1.9.12/sbin 找到nginx的启动程序。
nginx -c ../nginx-1.9.12/conf/nginx.conf 启动nginx程序，并指定配置文件。
3.如果要替换包，则直接替换就行，nginx为热加载自动更新的。但是以防有缓存之类的存在，可以使用nginx -s reload命令进行重载一次。
追加 一 ：
如果前端包的构造如下图
则location配置依然如下图
但是访问地址则需要指定到具体的html文件上。。
绑定： http://127.0.0.1:48110/binding.html
成功： http://127.0.0.1:48110/success.html
失败： http://127.0.0.1:48110/error.html
追加 二：
同一个端口部署多个页面：
一个server下，多个 location。
location的作用就是是否有后缀，并且这个后缀会去拼接root后的地址。
比如第二个location /sis/。
则在访问127.0.0.1:8080/sis时，会去自动寻找/apps/svr/nginx-1.9.12/pagefile/0921/sis这个包。 （Ps：location后的地址一定要用 / 关闭，比如 location /sis/，不然访问127.0.0.1:8080/sis时，会报错，只有用127.0.0.1:8080/sis/才行。）
这样就部署好了一个 端口支持多个页面。
‘叁’ 网页前端常用的库或框架有哪些
bootstrap是twitter出的一款不错的UI框架，或者与其说是框架不如说是类库（lib），当然这里边牵扯到一个“究竟什么是框架什么是类库？”的问题，我们暂时不谈。毕竟是有大公司背景的代码堆，我觉得没什么“落伍”可言。
angular是前两年之内突然火得一塌糊涂的一个fe框架，这个我觉得可以算的上是真正意义上的框架了，MVVM双向绑定，包括它拥有足够完善的社区、生态，甚至chrome上都有很多好用的相关插件（这一点可以说是占了google出品的光），比较完整的大型项目都是可以考虑引入的。但如果你的网站只是做一些轻量级的东西，杀鸡焉用宰牛刀吧我觉得。
backbone主要针对的MVC中的M层，至少我是这么理解的。对UI层它几乎没什么太多的限制，一方面给出了coder自由度进行发挥，另一方面也等于在这方面框架本身对开发没提供什么太大的帮助。我觉得这更像是一个高手向的框架，另外对于underscore前端模板那一套东西，说实话作为一名php java啥都能写的FE我始终觉得这套东西有那么一种纯JS工程师的一厢情愿的意味。这是个人看法了，不一定准确，况且有人会搬出ajax动态渲染时 前端模板的作用来反驳我，别急着反驳，至少往下看完我说的话。
相比之下，react可以说是一个在MVC中V层做的十分出色和新颖的框架了，独特的jsx编译机制就已经让你的代码变得高大上了，我是觉得这个类库在UI层做的更彻底更专业，或者说让FE的代码更专业了。更何况，react比angular更年轻，而且同样拥有大公司背景，react native一出更是让JS工程师的地位取得了革命性的提升，（不要跟我提phonegap，用过两个东西后你会明白，react打包的app性能甩phonegap几条街没问题）。另外既然楼主提到了之前的网站是bootstrap，不妨可以看一看react-bootstrap这个东西，或许这就是你想要的。
‘肆’ 如何用webpack实现自动化的前端构建工作流
1.首先 git clonehttps://github.com/bjtqti/font-end-boilerplate.git 一份到本地
2.然后 npm install && npm run start
3. 最后打开浏览器，运行http://localhost:4000
5.解析一下这些目录的用途：
|- dist下面存放发布的js、css 文件 （自动生成）
|- node_moles 下面是npm安装的包文件 （自动创建）
|- src 存放具体的业务代码
|- task 存放webpack的配置代码
|- task
|- webpack.api.conf.js 用于webpack的api方式的配置文件 server.js用到
|- webpack.dev.conf.js 用于CLI方式使用webpack 的配置
|- webpack.prod.conf.js 用于生产环境打包输出的配置
|- .postcssrc.js post-loader的插件配置文件，由于后面用了postcss.config.js所以重命名了这个
|- .babelrc babel的配置文件，为了解析es6语法
|- .gitignore git的配置，指出要不参与版本控制的文件及文件夹
|- .package.json 包配置文件
|- postcss.config.js post-loader配置
|- README.md github.com自动创建的项目说明文件
|- server.js 本地开发调式用的web服务器
需要重点掌握的是package.json 其次是server.js 和 task相关的配置内容
先看看package.json:
{
"name": "shop",
"version": "1.0.0",
"description": "webapp frontend shop",
"main": "index.js",
"scripts": {
"start": "node server.js",
"dev": "webpack-dev-server --config ./task/webpack.dev.conf.js",
"build": "webpack --config ./task/webpack.prod.conf.js",
"test": "echo "Error: no test specified" && exit 1"
},
"keywords": [
"mall",
"shop"
],
"author": "frog",
"repository": "https://github.com/bjtqti/font-end-boilerplate.git",
"license": "MIT",
"devDependencies": {
"babel-core": "^6.25.0",
"babel-loader": "^7.1.1",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-env": "^1.5.2",
"css-loader": "^0.28.4",
"express": "^4.15.3",
"extract-text-webpack-plugin": "^2.1.2",
"html-webpack-plugin": "^2.29.0",
"postcss-loader": "^2.0.6",
"style-loader": "^0.18.2",
"webpack": "^2.6.1",
"webpack-dev-middleware": "^1.11.0",
"webpack-dev-server": "^2.5.0",
"webpack-hot-middleware": "^2.18.0"
},
"dependencies": {
"babel-plugin-transform-runtime": "^6.15.0"
}
}
这个文件其实就是一个json对象，里边重点掌scripts 的用法。比如start：node server.js 对应 npm run start （或 npm start) 这条命令就相当于是在node环境下运行了server.js
那么server.js(文件名可以自已定）里边保存了一些什么内容？
var express = require("express");
var webpack = require("webpack");
var path = require('path')
var app = express();
var webpackConfig = require("./task/webpack.api.conf.js");
var compiler = webpack(webpackConfig);
var devMiddleware = require('webpack-dev-middleware')(compiler, {
contentBase: webpackConfig.output.path,
publicPath: webpackConfig.output.publicPath,
//hot: true,
//stats: { colors: true },
quiet: true
})
var hotMiddleware = require('webpack-hot-middleware')(compiler, {
//lazy: true,
//path:'/hmr',
log: () => {}
})
app.use(express.static('./dist'));
app.use(hotMiddleware)
app.use(devMiddleware)
app.listen(4000, function () {
console.log("Listening on port 4000!");
});
其实就是使用了express来搭建一个小型的开发服务器。然后引用webpack-dev-middleware和webpack-hot-middleware两个中间件，结合webpack.api.conf.js的配置，实现打包和热加载src下面的代码。由于这里涉及到express的知识，不打算涉及全栈的前端只需了解一下即可，因为后面还有一个封装好的工具可以替代这些工作--webpack-dev-server
所以我在script中添加了一个dev：webpack-dev-server 的命令，这全完是为了方便学习这两种方式的应用，实际上任选其中一种就好了，这一种可能会感觉更简单，因为它是第一种方式的封装，但是要深入的了解，还是建议看看第一种方式，Vue-cli也是采用的第一方式，因为它可供开发者自由支配的空间更大。唯一需要注意的是，如果使用webpack-dev-server的话，目前还不能用webpack3.0+。
接下来运行npm run build 看看，dist目录下是不是多了一些文件？这就是将来可以直接发布到线上的代码了。
到这里，打包，发布 都介绍完了，下面简单演示一下热替换（也就是所谓的无刷新替换效果）。为了演示方便，我在src下放了一些代码.
当我们打开http://localhost:4000的时候，浏览器上有一段绿色的文字:Hello world 还有一个时间毫秒数，加这个毫数的目的是为了演示，如果页面刷新了，数字会改变。
然后修改style.css中的内容，比如把字体颜色改成红色，浏览器上的字体颜色也相应的变化了，而数字没有发生改变。如果手动刷新的话，可以看到数字是会变化的。
这不仅会节省时间，而且对于要保存页面状态（比如某按钮选中）的情况非常有用。当我们修改hello.es6的时候，页面变成了自动刷新，这是因为我没有使用js的热替换加载器。
如果对html的修改，也想要自动刷新的话，需要用到插件，发出相应的事件。比如vue-cli中的方式：
// force page reload when html-webpack-plugin template changes
compiler.plugin('compilation', function (compilation) {
compilation.plugin('html-webpack-plugin-after-emit', function (data, cb) {
hotMiddleware.publish({ action: 'reload' })
cb()
})
})
这里只是发出一个通知：action:'reload'，要使页面自动重新加载，还需要有一个接收通知的代码：
比如在入口中加入：
/* eslint-disable */
require('eventsource-polyfill')
var hotClient = require('webpack-hot-middleware/client?noInfo=true&reload=true')
hotClient.subscribe(function (event) {
if (event.action === 'reload') {
window.location.reload()
}
})
这个地方比较深奥，没有弄明白也没关系，有其它方式同样可以实现。比如webpack-dev-server 内部已经自动完成了对不支持热替换的加载器，自动降为刷新。
这也是为什么在开发环境下使用了extract-text-webpack-plugin（提取css的插件）后，样式的热替换变成了刷新效果的原因。
‘伍’ 前端项目打包上线首次加载的HTML文件与刷新加载的不一样
因HTML文件加载时若遇到script标签则会转而加载js而暂停HTML文件的加载，导致js中对HTML的操作无法生效报错而加载终止
在body标签中引入js文件因HTML文件加载时若遇到script标签则会转而加载js而暂停HTML文件的加载，导致js中对HTML的操作无法生效报错而加载终止修改方式：在body标签外,HTML标签内加载js文件，则不会触发此错误因HTML文本已加载完毕，而body标签的script标签即使加载遇到错误也会加载后续的scrip标签