教程（一）---入口、devtool、输出、解析教程（二）---module.loaders教程（三）---plugins我的Webpack版本是3.10.0DevServer（官方文档）在开发模式下，DevServer提供了一个虚拟服务器，让我们进行开发和调试。它提供实时重新加载。它只是美丽。显着缩短开发时间。不是内置的webpack插件，请安装！！！//安装npminstallwebpack-dev-server--save-dev//在package.json配置下，方便使用。"scripts":{"dev":"webpack-dev-server"//运行命令会自动在node_modules文件夹中找到webapck-dev-server模块。}//webpack.config.jsconfiguredevServerdevServer:{clientLogLevel:'warning',historyApiFallback:true,hot:true,compress:true,host:'localhost',port:8080}如果没有在package.json中配置，仍然本地安装需要在命令行输入node_modules/.bin/webpack-dev-server。如果您的package.json已配置，请在命令行中输入npmrundev。下面说一下devServer配置中各项的使用。热（文档）热模块更新功能。即修改或模块后，保存会自动更新，无需刷新页面即可呈现最新效果。这不是和webpack.HotModuleReplacementPlugin(HMR)插件一样的功能吗？是的，但请注意HMR插件是一个真正的热模块更新。如果在devServer中配置了hot:true，webpack会自动添加HMR插件。所以模块热更新归根结底还是HMR插件的作用。主机（文档）写入主机名。默认localhostprot（文档）端口号。默认8080historyApiFallback(documentation)如果为true，页面错误不会弹出404页面。如果是{...}，看看里面一般有什么。重写：[{from:/^\/subpage/,to:'/views/subpage.html'},{from:/^\/helloWorld\/.*$/,to:function(){return'/views/你好世界.html；}}]//从代码中可以看出，url匹配正则模式，如果匹配成功，就会去到某个页面。//这里不建议写路由，一般historyApiFallback:true即可。verbose：如果为true，则激活日志记录。disableDotRule：禁止带小数点的url。.compress（文档）如果为true，则在启动虚拟服务器时压缩您的代码。加快开发进程并优化角色。contentBase（文档）你想在哪里为虚拟服务器提供内容。这里最好填写绝对路径。//单目录contentBase:path.join(__dirname,"public")//多目录contentBase:[path.join(__dirname,"public"),path.join(__dirname,"assets")]默认情况下，它将使用您当前的工作目录来提供内容。Open(documentation)true，自动打开浏览器。覆盖（文档）如果为true，则在浏览器上全屏显示编译错误或警告。如果您只想查看错误而不是警告，则默认为false（关闭）。overlay:{errors:true,warnings:false}quiet(documentation)true，则终端只输出初始启动信息。Webpack警告和错误不会输出到终端。publicPath(文档)配置publicPath后，url='hostname'+'publicPathconfigured'+'originalurl.path'。这其实和output.publicPath的用法类似。output.publicPath适用于js、css、img。而devServer.publicPath作用于请求路径。//devServer.publicPathpublicPath:"/assets/"//原始路径-->转换路径http://localhost:8080/app.js-->http://localhost:8080/assets/app.jsproxy(docs)当你有一个单独的API后端开发服务器并想在同一个域上发送API请求时代理这些url。看例子就明白了。proxy:{'/proxy':{target:'http://your_api_server.com',changeOrigin:true,pathRewrite:{'^/proxy':''}}假设你的主机名是localhost:8080，请求API的urlishttp://your_api_server.com/user/list'/proxy'：点击按钮，触发请求API事件，请求url为http://localhost:8080/proxy/user/list。changeOrigin:如果为true，则http://localhost:8080/proxy/user/list变为http://your_api_server.com/proxy/user/list。但这还不是我们想要的url。pathRewrite：重写路径。匹配/proxy然后变为''，则url最终为http://your_api_server.com/user/list。watchOptions(documentation)一组自定义监视模式，用于监视文件是否已更改。watchOptions:{aggregateTimeout:300,poll:1000,ignored:/node_modules/}aggregateTimeout：一旦第一个文件发生变化，在重建之前添加一个延迟。以毫秒为单位填写一个数字。忽略：查看多个文件系统可能会导致大量CPU或内存使用。可以排除一个巨大的文件夹。poll：填写毫秒数。每次（您设置的）检查以查看是否有任何文件已更改。不想启用也可以填false。完结了，希望你们喜欢！还没完，敬请期待！
