Webpack自动化模块加载及构建#2

上一篇文章中，笔者对webpack这个当下比较流行的模块加载器兼打包工具做了一些简单的介绍和笔者目前的使用场景，说句题外话，在这里，笔者并不想以一种什么一个小时，一周精通webpack的视角去撰写这样一种工具该如何运用自如，我也木有把这个工具玩明白，不过笔者更多的想以自己当下正在使用这个工具的感受和小小的经验去体现使用这样一款工具的优势和对工程的好处，未必写得出深入浅出的感觉，不过仁者见仁，智者见智，各位看官各取所需吧~



在这里笔者主要想说以下几点：

1.webpack-dev-server配置

2.webpack配合webpack-dev-server的使用

3.笔者使用webpack时，常用的一些plugin

对于webpack来说，如何加载，解析，管理不同的包，配置文件的撰写显得尤为重要。

在笔者的工程中，为了适配不同的运行环境，笔者为webpack的打包分别提供了不同的配置文件，在笔者的工程中是这样的：



这里一共有4个配置文件，其中三个是针对不同的的环境的

还有一个是笔者本地开发时，使用到了webpack-dev-server来自定义中转服务器的配置，这个在后面会说到

三个环境的配置文件中的内容其实大致一样，不同的是：

1.配置文件中添加哪些内容能够让开发者在本地环境和测试环境能够更方便开发和调试

2.配置文件中添加哪些内容能够提供更好的压缩率和模版更优的配置

那么既然说到了压缩率，笔者想要给大家简单的说下笔者用到一些plugin：

这是笔者生产环境是配置截图：



其中：

1.DefinePlugin：这里能够接受字符串并且插入到代码中，这样使用者就能够把这里插入的内容当成全局变量去指定程序去加载不同的内容：

比如：



2.HtmlWebpackPlugin：这个插件能够帮助你自动生成你需要部署的html文件，尤其是在你的应用可能会有多个不同的入口文件，并且不同的入口文件需要包含不同的打包好的静态文件时，尤为方便，你可以在该插件中去配置，你需要编译的模版文件、模版文件中需要包含哪些块（chunk），这些静态文件又应该插入到模版文件的什么位置，另外在笔者使用的文件中，还用到了minify这个配置：

也就是在压缩html文件的过程中，使用html-minifier对需要编译的html模版做哪些操作，其中我主要用到了以下三个配置：

removeComments，移除html中的注释，增加文件的不可读性

collapseWhitespace：删除换行符和空白符，增加文件的不可读性

removeAttributeQuotes：在安全的情况下移除属性值的引号

这里是属性值的字典：
https://github.com/kangax/html-minifier#options-quick-reference
3.OccurenceOrderPlugin

由于入口文件对于文件大小有较高的优先级，因此该plugin能够根据对比分块的id的使用频率得出最短的id分配给使用频率高的模块，从而提高入口文件的压缩优化率

4.UglifyJsPlugin

webpack的内建插件，专门用于压缩代码

这里我关闭了压缩代码时的警告信息

5.CommonsChunkPlugin

公用的模块分开打包，不和入口文件一起打包，从而提高代码的压缩率

另一方面

笔者在开发过程中使用到了webpack-dev-server这个工具，这是一个轻量的node.js express服务器，webpack-dev-server有个很实用的功能叫做热替换，开发过程中不需要刷新浏览器，任何前端代码的更改都会实时的在浏览器中表现出来，不过该server的不能替代后端的服务器，如果有需要进行后端开发，就需要采用双服务器的模式，一个后端服务器和一个资源服务器（即Webpack-dev-server)

配置双服务器热替换模式首先需要修改Wepack.config.js的entry条目：



我们需要在在Plugins中增加

new webpack.HotModuleReplacementPlugin()

不过，在这里，我们需要注意，采用双服务器模式开发的时候，我们很有可能会遇到跨域的问题，这时，我们可以通过一下几种方式去解决跨域的问题：

1.使用document.domain

2.配置诸如nginx的代理服务器来转发请求

3.配置诸如fiddler等抓包工具来转发请求

4.使用nodejs编写中转服务器

不过，webpack-dev-server本身就提供了这种配置来解决跨域的问题，这里采用node的方式来创建较为灵活的自定义server来转发请求

其中inline模式有两种方式：命令行方式和Node.js API

1) 命令行方式比较简单，只需加入--line选项即可。例如：

webpack-dev-server --inline

使用--inline选项会自动把webpack-dev-server客户端加到webpack的入口文件配置中。

2) Node.js API方式需要手动把webpack-dev-server/client?http://localhost:8080加到配置文件的入口文件配置处，因为webpack-dev-server没有inline:true这个配置项

在笔者的开发环境中，笔者使用UBUNTU进行开发，不想花费时间去配置linux上的fiddler，因此采用了node的方式去自定义webpack-dev-server，api的方式其实和inline的方式差不多，不过转发代理的配置，使用Node的方式会更为方便，在笔者这里就设定了转发的路由规则，在这里，笔者将请求携带api中缀的请求全部指向了指定的链接：



在这里：

changeOrigin：在请求头中添加host

secure：是否需要验证https

配置详情：
https://github.com/chimurai/http-proxy-middleware#options
最后给大家看下笔者线上的代码打包后的大小：



所以，真的，很小吧~

以上内容，大神们不免会有嫌弃，毕竟仅仅是浅谈笔者目前项目中开发用到的一点点技术和笔者自己一点点的积累，有啥问题也请大神们指点指点，毕竟笔者也还是个孩子，孩子的邮箱还是那个邮箱：

kameleon@126.com

最后坦白来说，想写的东西有很多，想研究的东西有很多，想说的废话也有很多，嘿嘿，不过毕竟细水长流嘛，笔者也会继续默默的学习，默默的更新博客，尽管路不好走，但还得走啊！