探测服务器打包文件,webpack开发服务器及打包成多个资源文件强大的功能

除了提供模块打包功能之外，webpack还提供了一个基于Node.js Express框架的开发服务器(webpack-dev-server)，这是一个静态资源Web服务器，简单静态页面或者仅依赖独立服务的前端页面，都可以直接使用这个开发服务器进行开发。在开发过程中，开发服务器会监听每一个文件的变化，进行实时打包，并且可以推送通知前端页面代码发生了变化，从而实现页面的自动刷新。webpack开发服务器需要单独安装，同样是通过npm进行，一般进行全局安装：$npm install -g webpack-dev-server之后便可以运行webpack-dev-server命令来启动开发服务器，然后再通过localhost：8080/webpack-dev-server/访问到页面。默认情况下，服务器以当前目录作为服务器目录。在React开发中，通常会结合react-hot-loader来使用开发服务器。

打包多个文件是webpack较之前的打包工具的主要进步之一。将模块打包成多个资源文件有两个目的：一是将多个页面的公用模块独立打包，从而可以利用浏览器缓存机制来提高页面加载效率；二是减少页面初次加载时间，只加载公共模块，其他模块可以动态按需去加载。webpack提供了非常强大的功能，让我们能够灵活地对打包方案进行配置。首先来看如何创建多个入口文件，代码如下：

可以看到，配置文件中定义了两个打包资源“a”和“b”，在输出文件中使用方括号来获得输出文件名。而在插件设置中使用了CommonsChunkPlugin，在webpack中将打包后的文件都称为“Chunk”，这个插件可以将多个打包后的资源中的公共部分打包成单独的文件，这里指定公共文件输出到“common.js”。这样就获得了三个打包后的文件，在HTML页面中引用即可，代码如下：

除了在配置文件中对打包文件进行配置，还可以在代码中进行定义，例如：

require.ensure(["module-a", "module-b"], function(require) { var a = require("module-a"); ... });

webpack在编译时会扫描到这样的代码，并对依赖模块进行自动打包，运行过程中执行到这段代码时会自动找到打包后的文件进行按需加载。

举报/反馈