这篇文章给大家介绍如何实现基于webpack实现网工程搭建,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。
<强> 1。引言
随着互联网前端技术的发展,在前端工程愈发复杂多变的今天,模块化已经变成了前端从业者津津乐道的话题,各种模块化工具层出不穷.seajs,, requirejs,凉亭,browserify,以及我们今天所要提到的一款前端模块化工具,终止,webpack。达观数据的前端技术选型中也时常选用webpack作为模块化管理工具。
图1 webpack
<强> 2。什么是webapck
webpack从诞生到现在也有些年头了,现在已经更新到2.0版本了。它是一款优秀的模块加载器兼打包工具,其* * *的特点是视一切资源为模块,可以把任何形式的资源都视作模块并引入到工程中,如commonJs模块,AMD模块,Sass,,少,Json, img, es6模块(2.0版本添加支持)等等,并且,你可以通过模块,插件等参数对依赖的模块进行整合打包,可以替代一部分杯,呼噜声类似的打包功能。
图2模块依赖关系
<强> 3。为什么要用webpack
webpack作为一款模块管理器有着自己独具的优势。
首先就是上一段提到的,webpack会把任何形式的资源都当做模块进行打包,传统的模块加载器仅仅针对js, webpack可以对任何形式的资源进行打包,使得项目管理起来更加的方便。
其次,webpack对AMD/CMD的模块加载模式都能兼顾,可以按个人的喜好选择模式进行模块依赖管理。
再者,webpack可以替代一部分杯/繁重的工作。他的装载机机制可以实现一部分压缩混淆的操作。
<强> 4。如何使用webpack
笔者准备的是一个单页演示,此处首先列一下目录结构,仅做参考。
├──dist #发布目录
├──包。json
├──src #工程源码
│├──资产#静态资源
│├──指数。html
│├──指数。js #入口文件
│├──js
│├──样式
│└──跑龙套#工具库
└──webpack.config。js # webpack配置文件
<强> 4.1安装
在项目的根目录下运行:
npm init
npm安装- d webpack
创建webpack配置文件webpack.config.js
<强> 4.2配置
一个webpack配置主要包含输入、输出模块、插件和解决这几类字段。
条目定义了文件的入口配置,输出对应的是项目的输出配置。(如图3所示)这里的文件名使用了散列字段添加散列后缀,解决因缓存导致的页面内容不更新的问题。
本文所提供的例子是单页模式,所以并没有多个入口。如果有多个入口的需求,可以通过以下的形式(图4)生成。编译后,代码会在outputDir目录下生成多个文件的包。js .
图3 webpack输入/输出配置
图4 webpack多入口的输入/输出配置
加载器是webpack。配置中的核心内容。它规定了每个模块使用哪种加载器来处理。具体配置如图5所示。可以观察到,加载器包含了很多个装载机,,每个加载器会使用测试字段匹配文件名,如果符合其正则,那么可以通过装载机字段对该文件进行加载。所有的加载器都需要使用npm进行安装,例如:如果我想使用css-loader,那么在根目录下运行npm,安装css-loader, - d即可安装对应的装载机,不用把装载机通过需要的方式引入,webpack自己可找到对应的加载器。然后在装载机字段中写明装载机:,,,css-loader&,,这里的,只要-loader&,可以省略不写。文件也有可能会使用多个加载器,使用!进行分隔,多个装载机加载的执行顺序是从右向左,在实际操作过程中需要注意这一细节。涉及到参数的字段使用?进行添加,使用,,,,,进行分隔多个参数。
图5 webpack装载机配置
加载器功能固然强大,但也有很多事情不能通过装载机实现,例如,webpack的装载机默认会把所有的文件都打包到一个包中,而实际的项目中为了网站的性能,html, css, javascript等资源一般都是需要分开并有选择的进行异步加载的。这时候就需要的插件在上线过程中进行一些处理了。在此,介绍一些常用的插件。
