㈠ webpack-dev-server搭建本地服务器
webpack提供了一个可选的本地开发服务器，这个本地服务器基于node.js搭建，内部使用express框架，可以实现我们想要让浏览器自动刷新显示我们修改后的结果。
不过它是一个单独的模块，在webpack中使用之前先安装它
devserver也是作为webpack中的一个选项，选项本身可以设置如下属性：
contentBase：为哪一个文件夹提供本地服务，默认是根文件夹，这里写./dist
port：端口号
inline：页面实时刷新
historyApiFallback：在SPA页面中，依赖HTML5的history模式
webpack.config.js文件配置修改如下：
在package.json中配置脚本
运行npm run dev遇到的问题： Error: Cannot find mole 'webpack-cli/bin/config-yargs'
原因是： webpack-cli的新版本对webpack-dev-server版本的不兼容
解决方案： 降低webpack-cli的版本为 "^3.3.12"
㈡ webpack怎么开启本地服务器
这个任务并不是webpack可以胜任的，虽然webpack
cover了一部分gulp/grunt的职能，但是不要忘了webpack的名字，它主要功能还是在于package，所以还是使用gulp/grunt进行上传吧，至于打包的task可以使用gulp-webpack这类插件来调用webpack。
关于上传server这个插件可以满足你
㈢ 如何搭建Web服务器
windows Server 2012 搭建web服务器方法如下：打开服务器管理器，找到添加角色与功能，单击打开。点击下一步，至如图所示的界面，检查一下服务器信息，看看是否有误，确认无误后，点击下一步选择Web服务器，在前面打对勾选择完后会弹出提示框，如下图所示，选择添加功能进到如图所示的页面后，可以选择要添加的WEB服务器的具体功能，可根据情况自行选择，这里我们选择默认设置，不做更改注意：在选择功能的时候，一定要检查一下最后面的管理工具中的IIS管理控制台是否选上。选择完功能后，单击下一步，进入安装界面，点击安装安装成功后，点击关闭
㈣ 创建react项目并配置webpack
本文章仅供自己参考使用
在项目的根目录下打开命令行，输入：
安装react 的东西,以及antd
安装webpack 的三个基本项
安装webpack
安装webpack 服务器 webpack-dev-server,让启动更方便
自动创建html文件 html-webpack-plugin
清除无用文件 clean-webpack-plugin,将每次打包多余的文件删除
样式编译loader插件
安装babel
(1) 在项目根目录下执行
(2) 如果装有yarn，也可以用yarn执行
执行结果：
㈤ win7如何搭建Web服务器
局域网Web服务器的主要功能是实现资源共享，同时借助于局域网服务器访问页面可有效的实现信息的同步下面我就如何在Windows7系统下搭建Web服务器与大家交流一下。
win7 搭建Web服务器 方法
1、打开控制面板，选择 “程序”，双击“打开或关闭Windows服务”
2、在弹出的窗口中选择“Internet信息服务”下面的所有选项，点击确定
3、开始更新服务
4、更新完成后，打开浏览器，输入“http://localhost/”回车，如果此时出现IIS7欢迎界面，说明Web服务器已经搭建成功。
5、当web服务器搭建成功后，把开发的网站安装到Web服务器的目录中。一般情况下，当Web服务器安装完成后，会创建路径“%系统根目录%inetpub/wwwroot”，将已开发的网站复制到该路径下。即可实现本地访问该网站。
6、设置防火墙，让局域网的 其它 计算机也能访问本地网站资源。具体方法：打开控制面板，选择“系统和安全”，点击“允许程序通过Windows防火墙”，在弹出的对话框中勾选“万维网服务HTTP”右侧的两个复选框，点击“确定”退出。
在局域网中其它计算机上，打开浏览器，输入 “http://Web服务器的IP地址/”按回车键，就可以访问服务器上的资源”。
经过以上步骤设置后，局域网中的其它用户就可以通过浏览器访问你所共享的web资源了!
㈥ webpack基本使用
step1: 创建一个项目录
注意：项目名一般 不要带中文
step2: 创建 package.json
或者：
step4: 处理第三方文件
html文件中需要引入多个js文件或者第三方模块(例如：jquery.js)，只引入项目js入口文件( main.js ),其他js文件均在入口文件中导入。导致可能JS文件中使用了浏览器不识别的高级语法:
总结：webpack可以做两件事情况：
step5: 配置入口文件和出口文件
每次修改js文件，手动输入命令： webpack 入口文件路径 -o 出口文件路径 重新打包， 每次都要输入入口文件和出口文件，麻烦。可以在项目目录下建立配置文件 webpack.config.js ,指定入口文件和出口文件:
重新打包：
step6: 实现自动打包编译
每次修改js文件，都要手动重新打包，还是麻烦？使用 webpack-dev-server 这个工具，来实现自动打包编译的功能。
webpack-dev-server 这个工具，如果想要正常运行，要求在本地项目中必须安装 webpack
在 package.json 文件中配置命令：
在终端中执行命令：
注：在终端执行 npm run dev ，就等于执行 webpack-dev-server 命令。这将在node中开启一个服务器，并且立即打包。每次修改文件，ctrl + s 保存文件,webpack-dev-server工具自动监听文件改变，并且自动打包。
改变文件引用路径：
执行上述命令后终端会有类似信息输出：
【 Project is running at http://localhost:8080/ 】——webpack-dev-server工具将项目托管到localhost:8080/端口上
【webpack output is served from /】——打包好的文件通过localhost:8080/bundle.js访问
【Content not from webpack is served from C:UsersyfbDesktop前端学习案例4.27wabpackDemo_1src】——不是通过webpack打包的文件，则是以src为根目录访问。
该项目根目录下并不存在bundel.js文件，我们可以认为webpack-dev-server把打包好的文件，以一种虚拟的形式托管到了咱们项目的根目录中，虽然我们看不到它，但是可以认为和 dist、src、node_moles平级，有一个看不见的文件，叫做 bundle.js。其实是为了频繁打包，提高效率，直接把打包的文件放在内存中。
因为项目托管到新服务器，现在应该访问的是 该服务器 下的项目，文件引用路径也要改变:
step7: 自动打开浏览器进行访问、配置端口号、指定托管的根目录、热重载（只是修改补丁，不重新生成整个bundle.js文件）
在 package.json 中配置命令，并重启服务器：
step8: 使用 html-webpack-plugin 插件
使用 --contentBase 指令的过程比较繁琐，需要指定启动的目录，同时还需要修改index.html中script标签的src属性。
安装 html-webpack-plugin 插件：
在 webpack.config.js 配置文件中配置插件：
html-webpack-plugin 插件的两个作用：
step9: 处理样式文件
html文件中需要引入css、less、sass样式文件。默认情况下，webpack处理不了这些样式文件。
处理css文件：
处理less样式文件
㈦ web服务器怎么搭建
1、首先在控制面板中打开“管理工具”，打开“Internet信息服务（IIS）管理器”；
2、点击我们的服务器，展开，然后右键点击“应用程序池”，选择“添加应用程序池”打开；
3、在弹出的对话框中填写好应用程序池的名称、.net版本、托管管道模式选择“集成”，选好了之后点击确定；
4、添加好了应用程序池之后，我们右击这个应用程序池，选择“高级设置”；
5、在弹出的对话框中，常规一栏中，在“启动32位应用程序”处选择“True”，然后点击确定，这样应用程序池就ok了；
6、然后我们右击“网站”，选择“添加网站”；
7、在弹出的对话框中，我们填入网站的名称，应用程序池处就选择刚才我们新建的那个应用程序池，然后选择物理路径，再把ip地址和的端口填上，主机名处我们填上域名，如果没有就可以不填；
8、填写完成之后，我们就点击“确定
㈧ 如何搭建的web服务器
首先，两台PC在同一个局域网内,比如pc1的IP地址为192.168.1.1 ，PC2的IP为192.168.1.2。
其次，看你安装什么操作系统及采用什么编程语言（常见的有PHP或ASP），假定你用windows+PHP,那么PC1的组合可以是WAMP（windows+Apache+Mysql+PHP），只需要下载一个wamp中文版的程序安装就可以了。假如你装在D盘根目录下D:\wamp，那么默认只要把web网页文件放到d:\wamp\root\下面就可以了（最好修改成index.html，因为PHP的默认执行文件是这个命名)，剩下的在pc1上启动wamp服务（有个按钮点一下启动），然后pc1打开浏览器执行 Localhost（前提是你这台机器没有装过其它web服务器），这时候就能看到你刚刚放入的web文件内容了（记得默认文件名称是index.html或index.htm），如果要访问非默认文件，比如你有个test.html,那么在浏览器中输入localhost/test.html就可以看到了，如果看不到说明服务器安装不正确或服务没有启动。利用pc2访问只需要在浏览器中输入http://192.168.1.1（pc1的IP地址）就可以访问了，非常简单
最后，要说明的，不论ASP和PHP都支持静态网页文件“.htm"及".html"文件，ASP是微软的东西，需要IIS支持，一般的windowsXP不带这个东东，只有安装windowsServer2000及以上版本的服务器版windows才默认带IIS，XP下可以到网上下载一个IIS6使用，安装非常简单，启动运行也简单，新手也能很快上手，同WAMP一样，安装完成后把网页文件复制到IIS默认网站的目录下就行（默认目录在IIS操作界面里面找，可以自己修改）。
如果你要写ASP.NET程序，那么WEB服务器的操作系统上必需要安装IIS+.NET库的支持才能运行ASPX程序（.net），不安装.net库的话只能运行.asp文件，关于.net的安装也很简单，不过个人建议使用wamp运行PHP，开销小，运行稳定更安全
㈨ Webpack 配置
通过 http://[devServer.host]:[devServer.port]/webpack-dev-server 查看 devServer 提供的所有资源列表。
通过 http://[devServer.host]:[devServer.port]/[output.publicPath]/资源名称 来访问对应的资源。
如果提供了 devMiddleware.publicPath ，则通过 http://[devServer.host]:[devServer.port]/[devMiddleware.publicPath]/资源名称 来访问对应的资源，但是通过插件生成的 html 和 css 文件当中所有资源引用的路径仍然使用的是 http://[devServer.host]:[devServer.port]/[output.publicPath]/资源名称 。因此需要保证 output.publicPath 与 devMiddleware.publicPath 一致。
static 设置的是静态资源目录的位置，不是打包生成的文件的存放位置，devServer 打包生成的文件存放在内存中，不存放到硬盘目录。
static.publicPath 设置的是访问静态资源的路径，不是访问打包生成的资源的路径，打包生成的资源路径通过 output.publicPath 访问，静态资源路径访问的是直接存放在静态目录中的静态资源。
配置文件
initial chunk 的文件名
占位符：
non-initial chunk 的文件名，占位符参考 output.filename
设置为 true ，每次打包之前清理 output.path 目录中的所有内容，可以替代 CleanWebpackPlugin 插件。
定义资源存放的位置，例如根据以上的配置文件打包之后生成如下文件：
将 1 2 3 生成的资源都存放到 output.path 目录， dist/app.bundle.js dist/css/app.min.css dist/images/1.jpg
部署的时候，将该目录下的内容复制到服务器对应的目录即可。
定义资源访问的路径
资源访问路径 = output.publicPath + 资源名称
output.publicPath 可以是绝对路径、相对于服务的路径、相对于页面的路径。 不管是哪种路径，都要以 / 结尾
HtmlWebpackPlugin 生成的 index.html 文件：
MiniCssExtractPlugin 生成的 css 文件：
HtmlWebpackPlugin 生成的 index.html 文件：
MiniCssExtractPlugin 生成的 css 文件：
HtmlWebpackPlugin 生成的 index.html 文件：
MiniCssExtractPlugin 生成的 css 文件：
不管通过哪种路径设置 output.publicPath ，都只是影响 HtmlWebpackPlugin 和 MiniCssExtractPlugin 生成的文件中引用其他资源的路径。具体能不能根据资源路径访问到相应的资源，还得正确的部署 output.path 目录到服务器。
在开发模式下，devServer 自动开启一个开发服务器，并且将所有打包生成的资源存储到内存当中，然后通过 http://[devServer.host]:[devServer.port]/[output.publicPath]/资源名称 来访问对应的资源。 这时候 output.publicPath 应该设置为相对服务的路径，例如 / 。
如果你的页面希望在其他不同路径中找到资源文件，则可以通过 devServer 配置中的 devMiddleware.publicPath 选项进行修改。
在生产模式下，推荐将 output.publicPath 设置为绝对路径，然后将 output.path 目录部署与绝对路径对应的服务器中。
配置文件
mole.rules 是匹配规则数组，数组中的每一项为一条匹配规则，以下称为 rule。每条 rule 包括匹配条件和匹配结果。
对于依赖图中的每个模块路径，都按照 mole.rules 中的 rule 依次进行匹配。如果模块路径满足某个 rule 的匹配条件，则对该模块应用该 rule 的 匹配结果中指定的 loader 进行预处理。? 如果模块路径满足多个 rule 的匹配条件 ?
匹配条件包括 test include exclude 选项，每个选项为一个匹配条件，选项的值可以是：
如果某个 rule 同时有多个匹配条件选项，则模块路径必须同时满足所有的匹配条件，才会对模块应用匹配结果。test 和 include 具有相同的作用，都是必须匹配选项。exclude 是必不匹配选项（优先于 test 和 include）。
最佳实践：
以上配置文件的第二条 rule，如果某个模块不在 ./src/node_moles/ 和 ./src/libs/ 目录下，并且在 ./src/ 目录下，并且模块名以 .js 结尾，则满足该条 rule 的匹配条件。
package.json
webpack.common.js
webpack.prod.js
webpack.dev.js
㈩ 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服务