webpack学习

简介: 跟gulp一样,也是一个模块化的开发工具,是有react(facebook)团队推广的,在webpack中,它认为所有文件都是资源,图片可以看成是资源,js可以看成是资源,css可以被看成资源,模板可以看成是资源等等。

跟gulp一样,也是一个模块化的开发工具,是有react(facebook)团队推广的,在webpack中,它认为所有文件都是资源,图片可以看成是资源,js可以看成是资源,css可以被看成资源,模板可以看成是资源等等。所以一切文件都可以作为资源模块加载。

webpack跟gulp一样,也是通过接口文件定义配置,webpack的配置文件叫做webpack.config.js,在webpack建议使用commen.js规范(像node一样书写模块),也支持cmd,和amd规范,但是不建议使用,webpack建议文件是打包的,webpack也是通过node编译的,因此可以像写node一样定义。

一、webpack配置

        一定是定义在接口文件中,module.exports={}

entry:定义html的入口文件,是字符串,表示一个入口文件,是对象,来定义多个入口文件,Key表示发布后的文件名称,Value:入口文件地址

Output:是一个对象,定义发布的地址,Filename定义发布的地址,如果entry是字符串,filename就是文件地址,如果entry是一个对象,filename通过[]模板引入入口文件,我们还可以通过path定义发布的目录

img_d8db7b5d0dacd04117ba16c14ffd678f.png

二、webpack-dev-server

它是webpack的一个服务器,作为一个插件存在,因此使用就需要安装,它跟webpack一样,需要全局安装,并且本地引入,安装完成会提供一个指令webpack-dev-server,当我们执行webpack-dev-server指令之后,会启动一个服务器,默认端口号是8080,我们可以预览我们发布的效果。

三、加载器

在webpack中,一切文件都可以被看成是资源,是资源我们就可以去模块化加载,我们加载js类的资源需要定义加载器(引入加载资源的插件),与模块相关的配置项,定义在module中,module中有一个属性叫loaders定义加载器:属性值是一个数组,一个成员代表一个加载器,test:定义加载资源的特征,是一个正则,loader定义加载器插件,多个插件用!级联。

3.1 css加载器

css文件的特征是。css结尾,css加载插件有两种,style-loader,css-loader

插件需要本地化,不能只安装在全局,将css与js打包,再加载

img_abe10e3be4304939a99d2af58d23c4ed.png

3.2图片加载器

图片也是一种资源,因此图片也可以加载,图片可大可小,如果图片很小,我们最好将他们打包,这样可以减少请求次数,如果图片很大,我们没有必要打包,直接异步加载就可以了。

加载图片的插件是url-loader,它有一个参数叫做limit,来定义图片大小的限制,单位是字节b,limit=2048,大小等译2kb,我们打包(基于h5的base64编码,大于2kb的我们只能异步加载)我们可以在?后面来定义参数,url-loader?limit=2048

img_033501e5fcc040458dd569a34c8a9154.png

四、插件

在webpack中,与模块相关的配置定义在module中,与其他功能(优化:压缩js等等)相关的定义在plugins中,属性值是一个数组,一个成员代表一个插件项

压缩js插件

由于压缩js插件很常见,因此已经被webpack内置了,我们可以通过webpack模块获取,我们可以在optimize中找到uglifyJsPlugin,它是一个类,因此我们需要实例化

img_7aebe68cd2d3f167e40db07c49937ba5.png
img_98f1b9d5efde6fe40ba5d11ee5671b89.png
相关文章
|
6月前
|
JSON JavaScript 前端开发
Webpack【Webpack图片处理、Webpack中proxy代理 、自动清理dist、Webpack优化、JavaScript中的代码检查】(三)-全面详解(学习总结---从入门到深化)(下)
Webpack【Webpack图片处理、Webpack中proxy代理 、自动清理dist、Webpack优化、JavaScript中的代码检查】(三)-全面详解(学习总结---从入门到深化)
89 2
|
JSON 前端开发 JavaScript
前端AJAX入门到实战,学习前端框架前必会的(ajax+node.js+webpack+git)(一)
前端AJAX入门到实战,学习前端框架前必会的(ajax+node.js+webpack+git)(一)
590 0
|
1月前
|
JavaScript
webpack学习三:webpack初始化整合配置vue,一步一步的抽离代码块整合vue。
这篇文章是关于如何在webpack环境中配置Vue.js,包括安装Vue.js、解决报错、理解el与template的区别、使用SPA模式、抽离模板为对象、封装为单独的js文件、安装vue-loader时遇到的问题及解决方案,以及整个过程的总结。
72 2
webpack学习三:webpack初始化整合配置vue,一步一步的抽离代码块整合vue。
|
1月前
|
JavaScript
webpack学习五:webpack的配置文件webpack.config.js分离,分离成开发环境配置文件和生产环境配置文件
这篇文章介绍了如何将webpack的配置文件分离成开发环境和生产环境的配置文件,以提高打包效率。
48 1
webpack学习五:webpack的配置文件webpack.config.js分离,分离成开发环境配置文件和生产环境配置文件
|
1月前
|
JavaScript 前端开发 Java
webpack学习一:什么是模块化开发,什么是webpack,以及二者之间的关系。
这篇文章介绍了模块化开发的概念、历史和实现方式,以及webpack作为一个现代JavaScript应用的静态模块打包工具,它如何帮助我们将ES6等高级语法打包成浏览器可以识别的低级语法,并解释了npm在webpack安装和使用中的作用。
42 1
webpack学习一:什么是模块化开发,什么是webpack,以及二者之间的关系。
|
1月前
|
移动开发 JavaScript 前端开发
webpack学习四:使用webpack配置plugin,来使用HtmlWebpackPlugin、uglifyjs-webpack-plugin、webpack-dev-server等插件简化开发
这篇文章主要介绍了如何通过配置Webpack的插件,如HtmlWebpackPlugin、uglifyjs-webpack-plugin和webpack-dev-server,来简化前端开发流程。
47 0
webpack学习四:使用webpack配置plugin,来使用HtmlWebpackPlugin、uglifyjs-webpack-plugin、webpack-dev-server等插件简化开发
|
6月前
|
Web App开发 JSON 前端开发
Webpack【搭建Webpack环境、Webpack增加配置文件、Webpack中使用Loader、Webpack分离CSS文件 】(一)-全面详解(学习总结---从入门到深化)
Webpack【搭建Webpack环境、Webpack增加配置文件、Webpack中使用Loader、Webpack分离CSS文件 】(一)-全面详解(学习总结---从入门到深化)
238 0
|
6月前
|
存储 前端开发 JavaScript
Webpack【Webpack中模式(Mode)、Webpack中使用DevServer、Webpack中devtool增强调试过程】(二)-全面详解(学习总结---从入门到深化)
Webpack【Webpack中模式(Mode)、Webpack中使用DevServer、Webpack中devtool增强调试过程】(二)-全面详解(学习总结---从入门到深化)
165 0
|
6月前
|
JSON 前端开发 JavaScript
Webpack【搭建Webpack环境、Webpack增加配置文件、Webpack中使用Loader、Webpack分离CSS文件 】(一)-全面详解(学习总结---从入门到深化)(上)
Webpack【搭建Webpack环境、Webpack增加配置文件、Webpack中使用Loader、Webpack分离CSS文件 】(一)-全面详解(学习总结---从入门到深化)
90 0
|
4月前
|
JavaScript 前端开发 应用服务中间件