博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
webpack搭建多页面系统(二):对webpack.config.js配置文件的理解
阅读量:6689 次
发布时间:2019-06-25

本文共 1447 字,大约阅读时间需要 4 分钟。

webpack配置文件的理解

webpack的配置文件是没有固定的命名的,在我的项目中建立了两个配置文件,一个是开发的配置文件webpack.config.js;另一个是上线的配置文件webpack.build.config.js。两者内容上的差别,在以后的文档中解释。它们是怎么执行不同的配置文件的尼?这才是重点。

在package.json文件中,有脚本的执行配置,如图:

clipboard.png

在我们的cmd命令行中,开发时:执行npm run dev;将执行我们的webpack.config.js文件;
最终上线时:执行npm run build;将执行我们的webpack.build.config.js文件;两者的内容有细微的差别。
这是对两个配置文件的理解。
每次编译代码时,手动的npm run dev 就会变得有点麻烦。
webpack提供了几个选项,可以帮助我们在代码发生变化后自动编译代码:
1、webpack's Watch Mode
2、webpack-dev-server
3、webpack-dev-middleware
多数场景中,使用webpack-dev-server。
参考官方文档:
在我的项目中使用的是webpack-dev-sever。提供了一个简单的web服务器,并且能够实时重新加载(live reloading)
webpack.config.js

clipboard.png

参考webpack-dev-server文档:

devServer:{    contentBase:目录文件所在的位置,    historyApiFallback:任意的404响应都可能需要被替代为index.html.一般默认true.    historyApiFallback:{            rewrites:[                {from:/^\/$/,to:'/views/landing.html'}, #以根‘/’开始,以根‘/’结尾的请求,重定向到‘/views/landing.html’                {from:/^\/subpage/,to:'views/subpage.html'}, #以‘/subpage’开始的请求,重定向到‘views/subpage.html’                {from:/./,to:'/views/404.html'} #不匹配上面的任意除了换行符之外的请求,重定向到‘/views/404.html’            ]        }    inline:boolen;在dev-server的两种不同模式之间的切换。默认启用内联模式(    inline mode),处理实时重载的脚本被插入到你的包(bundle)中,并且构建消息将会出现在浏览器控制台。    progress:boolen;用于命令行工具,将运行进度输出到控制台。    port:number;指定要监听请求的端口号    index:string;索引文件的文件名    host:string;指定使用一个host.默认是localhost。ip地址    proxy:object;代理配置,代理后端开发服务器API,并且希望在同域名下发送API请求。        }

这是对webpack.config.js中对webpack-dev-server的解读!!!可能存在一些不对的地方,希望指出!!!

转载地址:http://dzuoo.baihongyu.com/

你可能感兴趣的文章
Kali Linux 网络扫描秘籍 第三章 端口扫描(一)
查看>>
共享单车步入物联网军备战
查看>>
PHP 魔术变量
查看>>
推荐的PHP编码规范
查看>>
Gartner报告:东方金信进入Hadoop世界厂商名录
查看>>
Python_(1)数据类型及其常见使用方法(图文)
查看>>
如何查看WWN号
查看>>
主页被劫持问题
查看>>
linux中awk学习小结
查看>>
WCF分布式开发常见错误(23):the fact that the server certificate isn't configured with HTTP.SYS...
查看>>
第一个Indigo Service
查看>>
《Pro ASP.NET MVC 3 Framework》学习笔记之三十二 【无入侵的Ajax】
查看>>
监听启动报TNS-12537、TNS-12560错误
查看>>
XXX管理平台系统——项目教训
查看>>
会写代码的项目经理
查看>>
通过Lua解释器来扩展丰富nginx功能,实现复杂业务的处理
查看>>
禁用WPF窗体的最大化按钮
查看>>
玩转React样式
查看>>
TinyHttpd中sockaddr与struct sockaddr_in的区别
查看>>
嘉峪关市与甘肃省广电网络公司对接智慧城市建设项目
查看>>