1、webpack 服务器端必须用node 处理吗
node.js实现web服务器还是比较简单的，我了解node.js是从《node入门》开始的，如果你不了解node.js也可以看看！
我根据那书一步一步的练习完了，也的确大概了解了node.js，不过里面写的路由的地方总感觉不方便，十一放假最后一天，试着写了个简单的web服务器，现在分享记录于此！
http模块已提供了基本功能，所以我主要解决两个问题，1是静态资源的处理，2是动态资源的路由。
静态资源在node.js里的意思是不变的，如图片、前端js、css、html页面等。
动态资源我们一般指aspx页面，ashx页面，asp页面，jsp页面，php页面等，而node.js里其实没动态资源这一说，它对请求的处理都是由回调方法完成的，在我实现的httserver里，借鉴了ashx的写法，把处理请求的js文件看作动态资源。
首先实现一个处理静态资源的函数，其实就是对本地文件的读取操作，这个方法已满足了上面说的静态资源的处理。
//处理静态资源
function staticResHandler(localPath, ext, response) {
fs.readFile(localPath, "binary", function (error, file) {
if (error) {
response.writeHead(500, { "Content-Type": "text/plain" });
response.end("Server Error:" + error);
} else {
response.writeHead(200, { "Content-Type": getContentTypeByExt(ext) });
response.end(file, "binary");
}
});
}
而动态资源肯定不能一个方法搞定，就像你的网站有register.aspx、login.aspx等等，都需要你自己来写，在我的httpserver里，每个处理请求的js模块都导出processRequest(request,response)即可，比如实现一个register.js(只输出字符串register)
exports.processRequest = function (request, response) {
response.writeHead(200, { 'Content-Type': 'text/plain' });
resp.end("register");
}
现在当请求到来时，我们要做的就是决定怎么处理，即路由。
因为静态资源url指定静态资源大家都很习惯了，所以这里不变，比如
访问http://localhost/img/logo.png 就是访问 web根目录\img\logo.png；
访问http://localhost/js/what.js 就是访问 web根目录\js\what.js；
而动态资源也是一般的js文件，即服务器端js，就比如我实现的这个httpserver.js和上面说的register.js都是不应该让用户访问的，所以路由的时候要判断，就是一些if、else，简单而强大是我的最爱，这里只看最后的的判断，
fs.exists(localPath, function (exists) {
if (exists) {
if (staticRes) {
staticResHandler(localPath, ext, response); //静态资源
2、webpack 也可以作为本地服务器吗
webpack配置文件
之前是依赖全局环境下的打包过程，下面将 webpack 安装到项目的依赖中，这样就可以使用项目本地版本的 webpack
首先创建package.json文件：
npm init
1
1
自动生成后如下：
{
"name": "webpack-package.json",
"version": "1.0.0",
"description": "",
"main": "bundle.js",
"dependencies": {},
"devDependencies": {},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [
"webpack"
],
"author": "yangll",
"license": "ISC"
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
安装项目环境
npm install webpack --save-dev //安装
npm uninstall webpack --save-dev //卸载
1
2
1
2
设置Webpack 的配置文件webpack.config.js
var webpack = require('webpack');
var path = require('path');
mole.exports = {
entry: path.resolve(__dirname, './entry.js'),
output: {
path: path.resolve(__dirname, './'),
filename: 'bundle.js',
},
};
1
2
3
4
5
6
7
8
9
10
1
2
3
4
5
6
7
8
9
10
命令后执行webpack完成打包
webpack
1
1
打包日志如下
Hash: 71820986fc674176394e
Version: webpack 1.13.1
Time: 82ms
Asset Size Chunks Chunk Names
bundle.js 1.42 kB 0 [emitted] main
[0] ./entry.js 27 bytes {0} [built]
1
2
3
4
5
6
1
2
3
4
5
6
设置 package.json scripts
把下面的内容添加到 package.json
"scripts": {
"build": "webpack"
}
1
2
3
1
2
3
然后输入 npm run build 就可以编译了
启动webpack内置服务器环境
使用 webpack-dev-server 开发服务是一个更好的选择。它将在 localhost:8080 启动一个 express 静态资源 web 服务器，并且会以监听模式自动运行 webpack，在浏览器打开 http://localhost:8080/ 或 http://localhost:8080/webpack-dev-server/ 可以浏览项目中的页面和编译后的资源输出，并且通过一个 socket.io 服务实时监听它们的变化并自动刷新页面。
安装
$ npm install webpack-dev-server --save-dev
1
1
启动
webpack-dev-server
1
1
日志
http://localhost:8080/webpack-dev-server/
webpack result is served from /
content is served from D:\project
Hash: 71820986fc674176394e
Version: webpack 1.13.1
Time: 141ms
Asset Size Chunks Chunk Names
bundle.js 1.42 kB 0 [emitted] main
chunk {0} bundle.js (main) 27 bytes [rendered]
[0] ./entry.js 27 bytes {0} [built]
webpack: bundle is now VALID.
3、webpack和webpack-dev-server的区别
第一：webpack只是构建
webpack-dev-server除了构建，还提供web服务
第二：webpack.config.json的路径参数
显然，entry都一样，因为都要知道需要构建的文件在哪里
那么区别就在于 output了
path和webpack一起，指明构建 之后 输出文件的位置，这是真实的物理地址
publickPath和webpack-dev-server一起，当执行webpack-dev-server时，第一步首先跟webpack一样，先构建输出，然后提供web访问，该输出文件是在内存中
默认情况下，不设置publicPath则输出文件默认在运行webpack-dev-server的目录，也就是根目录，，那么html中引用直接是src="输出的文件"，，如果设置了publicPath那么html中引用也要相对改变
总的来说，webpack只是构建，而webpack-dev-server相当于webpack+apache（或者其它web服务器）
区别在于
使用webpack+apache（或者其它服务器），每次构建之后
1 根据path引用构建后的输出文件；
2 每次修改都要重新运行webpack
使用webpack-dev-server，运行之后
1 先构建，输出文件在内存中，引用构建后的输出文件根据publicPath（默认是根目录）；
2 每次修改，自动刷新
4、vue-cli + webpack 打包后的dist文件怎么在服务器中运行
使用nginx，借鉴网页链接
5、webpack-dev-server和http服务器如nginx有什么区别?
webpack-dev-server使用内存来存储webpack开发环境下的打包文件，并且可以使用模块热更新，他比传统的http服务对开发更加简单高效。(BY 三人行慕课)
6、webpack怎么在打包完之后自动上传文件到服务器
webpack config里面配置
自动打包需要设置mole里面的loaders
比如react使用babel打包。内
热部署就比较容简单了。
可以使用plugins里面的HotMoleReplacementPlugin()
也可以使用webpack dev server hot:true
7、求助webpack-dev-server的问题 服务器链接报错
server启动后会自动退出
怎么解决
server服务自动关闭很大一部分是由于系统本身存在一定的缺陷专和漏洞导致的，也可能是属因为木马病毒攻击漏洞问题所致，病毒木马攻击提供文件共享服务computerbrowser进程，会导致server服务自动关闭。
8、webpack打包后的代码，如何部署到服务器上
本文章前端代码是基于vue+webpack开发的
Nginx是一款轻量级的Web 服务器/反向代理服务器
首先，webpack配置如下
在开发过程中，我们是通过npm run dev在开发环境中运行代码
如果要部署到生产环境中，可以运行npm run build进行上线打包
打包完成后，会发现项目中多了dist这个文件夹
执行结果和webpack的配置文件一致。
代码被webpack打包完成后下一步就是部署到服务器上，此文仅适合于前端代码是部署在windows操作系统的nginx服务中。
这里假设：
Windows操作系统：windows server 2008 64位
Nginx服务：nginx-1.12.2 64位
1.下载nginx-1.12.2 64位解压，假设nginx-1.12.2放在D:nginx-1.12.2目录中，nginx目录结构。如图下
2、前端代码放在D:nginx-1.12.2html目录中，dist目录就是刚刚前端打包完的代码。如图下
3、在D:nginx-1.12.2conf目录中，有个nginx.conf配置文件，进行编辑这个文件
4、假设前端的端口号为8082，如果端口号被占用，请修改为其它端口号。后台服务访问地址http://192.168.121.**:8080,
5、打开cmd控制台，进入目录D:nginx-1.12.2中，用start nginx命令启动服务，然后用tasklist /fi "imagename eq nginx.exe"，查看nginx服务是否启动。
4、如果改变配置文件时，需要用nginx -s reload 命令重启nginx工作进程。
5、关闭服务
nginx -s stop
nginx -s quit 安全关闭
taskkill /F /IM nginx.exe > nul 关闭所有nginx服务
9、webpack怎么开启本地服务器
首先，内网要有固定IP，另外要有路由器，在路由器中把你内部IP192.168.1.2的80端口打开就行了,你就可以通过123.45.67.89来访问内网的WEB了
10、webpack打包的文件 怎么发布到服务器
这个任务并不是webpack可以胜任的，虽然webpack cover了一部分gulp/grunt的职能，但是不要忘了webpack的名版字，它主要功能还权是在于package，所以还是使用gulp/grunt进行上传吧，至于打包的task可以使用gulp-webpack这类插件来调用webpack。
关于上传server这个插件可以满足你