webpack基础入门

我相信,有不少的朋友对webpack都有或多或少的了解。网上也有了各种各样的文章,文章内作者也写出了不少自己对于webpack这个工具的理解。在我刚刚接触webpack的时候,老实说,网上大部分的文章我是看不懂的。。webpack里面有很多名词,是没有接触和理解过模块化的同学都难以理解的。我感觉,学习任何一项新技术,要弄清楚为什么使用它,它是什么,它有什么用等概念,弄清楚这些概念之后,我相信,在日后的webpack学习中会达到事半功倍的效果。这篇文章,我会以最简单的方式,阐述什么是webpack。当然,这是我个人对webpack的一些理解,也是在学习中总结。

另外,最好的学习webpack的资源是webpack的官网。传送门:webpack

当然,如果你早已是webpack的实践者,对webpack认识足够深入,这篇文章不太适合您阅读。如果你是小白,那就可以开启webpack的探索之路了。

webpack是目前流行的一款模块化打包工具。

webpack定义:一款前端资源模块化和打包工具。

webpack作用:

1. 将许多松散的模块按照依赖关系和规则打包成符合生产环境环境部署的前端资源。
2. 将按需加载的模块进行代码分割,等到实际需要的时候再异步加载。
3. 通过加载器loader的转换,所有的前端资源都可以看作是模块。比如说CommonJS模块,AMD模块,ES6模块,css,sass,json,图片等。

短短的几句话,就有太多让人难以明白的地方。

1. 什么是前端资源?

2. 什么是模块?

3. 什么是模块化?

4. 什么叫按需加载?

5. 如何实现按需加载?

6. 什么是plugins?

7. 什么是loader?

什么是前端资源

所谓前端资源,就是我们在创建html时,引入的script,link,img,json等文件。webpack足够的优秀,只需要在html文件中引入一个js文件,在定义一个入口文件js,用于存放依赖的模块,就可以将其他前端资源按照依赖关系和规则打包。

以前我们需要这样来引入文件。

<link rel="stylesheet" href="style/stylesheets/screen.css" media='screen'/ > <script src='script/jquery-2.2.1.min.js'></script> <script src='script/bootstrap.js'></script> <script src="script/index.js" ></script>

index.js依赖bootstrap.js,而bootstrap又依赖于jquery。我们必须按照DOM顺序来写每一个js文件。

现在只需要在html中引入一个主文件index.js,其他依赖的前端资源都写在另外一个入口文件js中,这个入口文件不用写在html中,然后配置好config,在cmd中输入webpack执行编译,所有前端资源都被引入了。并且webpack会帮我们入口文件entry.js的每个模块的类型和依赖关系,等到需要的时候再按需加载。

//html
<!DOCTYPE html>
<html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <script src='js/main.js'></script> <!-- 引入引入主模块 main.js --> </body> </html> //entry.js import $ from 'jquery'; import other...

什么是模块

在webpack中,所有的前端资源都是模块,可以通过加载器loader进行转换。在javascript方面,有几大模块系统,CommonJS模块,AMD模块,CMD模块,ES6模块。谈谈我对这几大模块的理解。

CommonJS

在CommonJS中,有一个全局方法require(),用于加载依赖模块。

//main.js
var jquery = require('jquery');
var bootstrap = require('bootstrap');

主文件main.js模块依赖于这两个模块,CommonJS缺点就是同步加载。也就是说,会先加载jquery模块,等到jquery加载完了再去加载bootstrap模块。引用阮一峰老师的话

同步加载意味着阻塞加载,当依赖的模块太大时,浏览器会处于假死的状态。

假死意味着浏览器任然处在加载中,仍然还是空白页面。这种假死的状态带来的后果就是用户的离开。

AMD模块

AMD也叫异步模块定义,英文Asynchronous Module Definition。AMD是requirejs对模块定义时的产出。它采用异步方式加载模块,每个独立模块的加载不影响回调函数中定义的模块的运行。在回调函数中定义一个模块,只有当依赖的模块加载完成之后,该模块才会编译执行。AMD也采用require()语句来加载一个模块,但是不同于CommonJS,它有两个参数。第一个参数是数组,需要传入依赖模块;第二个参数是回调函数,回调函数中也接受参数,而参数是形式参数,来自于每一个依赖模块。举个例子。

//main.js
require(['jquery','bootstrap'],function($, boot){ //写入的模块 })

主模块main.js依赖于jquery,Bootstrap模块,main只有在这两个模块加载完成之后才会编译执行main定义的模块,属于同步加载。而在两个依赖模块中,属于异步加载。也就是说bootstrap不用等到jquery加载完成之后再加载,被依赖的模块是哪一个模块小,就先加载哪一个,这就避免了CommonJS模块中同步加载依赖模块而出现浏览器假死的状态。稍微总结一下,
主模块需要等到依赖模块加载完成之后才编译执行,属于同步加载;而被依赖模块之间属于异步加载,哪一个模块小,就先加载哪一个。

AMD模块的一大不足就是所有依赖的模块都需要提前加载,依赖前置。

CMD模块

CMD模块跟AMD很相似,这里引用玉伯老师的话看看CMD和AMD的区别。

对于依赖的模块,AMD是提前执行,CMD是延迟执行。

CMD推从依赖就近,AMD推从依赖前置

依赖就近的意思就是当我需要某个模块的时候再去异步加载。也就是按需要加载前端资源,懒加载。
可以用八个字来总结CMD。依赖就近,延迟执行。

ES6模块

ES6模块的设计思想,是尽量的静态化,使得编译时就能确定模块的依赖关系,以及输入和输出的变量。ES6中与CommonJS,AMD模块一个区别在于ES6是通过import关键字来输入某个模块提供的功能,export或者export default规定该模块的对外接口,通俗易懂一些,也就是暴露该模块定义的一些属性和方法,供其他模块调用。

ES6和CommonJS,AMD模块最大的区别在于,ES6模块可以实现编译时加载,简单的说就是按需加载。而后两种方法只能是运行时加载。上一段代码。

ES6:
import {get, post, ajax} from 'jQuery';CommonJS:
var 

什么是模块化

webpack是支持以上的模块系统的。在头脑中要形成某种技术的知识框架才能学好该技术,所以花费了一些时间做了些介绍。模块化就是webpack使用某种方法将每一个松散的模块按照依赖关系编译的过程。webpack需要一个入口js文件,主模块js文件,config文件就可以实现前端资源模块化。看个简单的例子。

<!DOCTYPE html>
<html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <script src='js/main.js'></script> 1. <!-- 引入主模块 main.js --> </body> </html> 2. //入口文件 entry.js document.write("<h1>I'm Uncke Keith!</h1>"); 3. //webpack.config.js module.exports = { entry :'./app/js/entry.js', output : { path: './dist/js' filename: 'main.js' } }; 4. //打开cmd,在文件目录下,输入webpack执行编译就可以看到document.write()的结果了。

什么叫按需加载?

webpack的其中一个作用就是可以将按需加载的模块进行代码分割,根据实际需要进行异步加载。按需加载,顾名思义就是按照用户需要某个功能的时候在加载相应的模块。举个例子,当我们在浏览一些图片网站的时候,如果图片在你打开该网站的时候就全部一起加载好,那造成的后果就是页面会保持一段时间的空白状态,直到全部图片加载完成之后才会显示。如果是按需要加载,就可以在用户刚进入页面的时候加载可视区域窗口的图片,当用户拖动滚动条下拉的时候再去加载图片,这样不仅减少HTTP请求,同时提高了页面加载速度。在举一个例子。在单页应用中,为了减少http请求次数,会把所有js文件合并为一个文件,这样请求数量减少了,可是请求的文件体积却变大了。按需加载就可以解决这个问题。

如何实现按需加载?

ES6的一大涉及思想就是想让前端资源静态化,在编译的过程中,而非运行过程中就确定模块的依赖关系。webpack在编译的过程中,就会对整个代码进行静态分析,分析出各个模块的类型和它们依赖关系,然后将不同类型的模块提交给适配的加载器来处理。比如一个用 Sass 写的样式模块,可以先用 Sass-Loader加载器将它转成一个CSS 模块,在通过 CSS 模块把他插入到页面的 style 标签中执行。并且在你编译的时候就确定了依赖关系。

什么是plugins?

webpack跟我们提供了很多内置的插件,可以实现loader做不到的事情。在这里介绍几个常用的插件。

1. extract-text-webpack-plugin

我们在入口文件中import(或者require)进一些css文件时,webpack会帮我们把css样式与其他前端资源打包到output的filename文件中,然后在head标签中会自动加载一个style标签。但是,我们可能会需要独立出一个css文件,这时候就需要使用extract-text-webpack-plugin插件了。具体用法如下:

var ExtractTextPlugin = require("extract-text-webpack-plugin");
//这里需要使用CommonJS语法来引入一个依赖。module.exports = { module: { loaders: [ { test: /\.css$/, loader: ExtractTextPlugin.extract("style-loader", "css-loader") } //loader的执行顺序是 先执行css-loader给css文件加上地址,然后执行style-loader在头部加上style标签。 ] }, plugins: [ new ExtractTextPlugin("styles.css") //使用plugins选项对象,使用new调用ExtractTextPlugin构造函数,传入的参数是需要单独生成的css文件,路径与output中的path路径相同。详细的参数可以到extract-text-webpack-plugin官网查看。 ] }

当我们成功生成了单独的css文件之后,就可以通过link标签引入了。

什么是loader?

Webpack 本身只能处理原生的 JavaScript 模块,但是 loader 转换器可以将各种类型的资源转换成 JavaScript 模块。这样,任何资源都可以成为 Webpack 可以处理的模块。每一个loader都会针对入口文件entry.js的依赖模块引入的前端资源进行转换。站在更高的角度上看问题,我们在webpack.config.js里面的所有配置都是针对入口文件的,始终记住这点很重要。因为这就是我们配置webpack.config.js的目的。在这里介绍一些常用loader。

1. postcss-loader

我是一名sass实践者,并且用着一个封装了很多mixins的compass库,这个库的最大好处就是可以直接include一些compass封装好的的css3的mixin时,编译之后会帮我们加上css前缀。如果想在.vue中也实现这种自动前缀的功能,可以使用webpack给我们提供的postcss-loader。(可以去官网查看相关介绍)。postcss?这又是什么鬼,其实postcss只是一个平台,我们需要用的是基于postcss平台上的一些常用的插件。

如果想使用这个插件,需要下载一些依赖。

cnpm install autoprefixer --save-dev
//autoprefixer用于添加css3前缀

具体的webpack.config.js配置如下

//注意先引入依赖
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var autoprefixer = require('autoprefixer'); module.exports = { entry: __dirname + '/app/entry.js', output: { path: __dirname + '/dist', filename: 'bundle.js' }, module: { config... }, postcss:[ autoprefixer() ] };

如果你的入口文件entry.js是这样的。

...
import './assets/main.scss';

那么当然你在main.scss使用scss语法写一些css3属性时,在编译之后就可以看到css3前缀了。但是如果你的样式是写在*.vue组件里面的

比如说,入口文件entry.js是这样的。

...
import app from './app.vue';

topBar.vue

<template>config...
</template> <script> config... </script> <style lang='sass' scoped> .main{ font-weight: bold; p { border-radius: 10px; box-shadow: 3px 3px 3px #ccc; transition: all 0.3s; 此处测试css3的属性前缀 } } </style>

在浏览器中查看效果,你会发现,.vue组件中定义的style样式并没有加上属性前缀。

.main p[data-v-a64cfc10] {background-color: red;border-radius: 10px; box-shadow: 3px 3px 3px #ccc; color: red; display: inline-block; font-weight: bold; height: 100px; transition: all 0.3s ease 0s; }

难道是postcss-loader失效了?其实并不是。出现这种情况的原因主要还是对vue-loader不熟悉导致的。因为你是把样式写在了单个*.vue组件中,所以这里会涉及另外一个lodaer,也就是Vue官方提供的vue-loader。在vue-loader中如果也想让样式拥有前缀,在webpack.config.js要进行如下配置。

module.exports = {
    entry: ... ,
    output: { ... },
    module: { ... },这里配置vue指的是vue-loader,我们需要在vue-loader中再一次配置postcss。
    vue: {
 postcss: [require('autoprefixer')()],  autoprefixer: true },  postcss:[ autoprefixer() ] //也就是说,postcss需要配置两处。一是解析entry.js中引入的css模块;一处是解析 单个*.vue组件的<style>标签中的样式。 }

执行编译,你会发现正常显示了。

转载于:https://www.cnblogs.com/chenliyang/p/6548336.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/372702.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

位运算基础

异或运算的基础有点忘记了 先介绍一下。。2个数异或 就是对于每一个二进制位进行位运算 具有2个特殊的性质 1、一个数异或本身恒等于0&#xff0c;如5^5恒等于0&#xff1b; 2、一个数异或0恒等于本身&#xff0c;如5^0恒等于5。 3 满足交换律 1.交换数字这个性质能利用与交换数…

JAXB自定义绑定– Java.util.Date / Spring 3序列化

JaxB可以处理Java.util.Date序列化&#xff0c;但是需要以下格式&#xff1a; “ yyyy-MM-ddTHH&#xff1a;mm&#xff1a;ss ”。 如果需要将日期对象格式化为另一种格式怎么办&#xff1f; 我有同样的问题时&#xff0c;我正在同春MVC 3和Jackson JSON处理器 &#xff0c;最…

双足机器人简单步态生成

让机器人行走最简单的方法是先得到一组步态曲线&#xff0c;即腿部每个关节随时间运动的角度值。可以在ADAMS或3D Max、Blender等软件中建立好机构/骨骼模型&#xff0c;设计出脚踝和髋关节的运动曲线&#xff0c;然后进行逆运动学解算&#xff0c;测量每个关节在运动过程中的转…

重新访问了访客模式

访客模式是面向对象设计中最被高估但又被低估的模式之一。 高估了它&#xff0c;因为它常常被选择得太快&#xff08; 可能是由建筑宇航员选择的 &#xff09;&#xff0c;然后以错误的方式添加时会膨胀本来非常简单的设计。 如果您不遵循教科书示例&#xff0c;那么它可能会非…

java web开发技术大_2021年六大javaweb开发主流技术

作为历史最为悠久的编程语言——java&#xff0c;历经数十年依然盘踞在编程榜最前面的位置&#xff0c;这与它的技术和应用范围是分不开的&#xff0c;同时呢&#xff0c;javaweb开发主流技术更是java开发者时时刻刻关注的问题&#xff0c;接下来我们一起分析一下2020年互联网行…

ASP.NET—013:实现带控件的弹出层(弹出框)

http://blog.csdn.net/yysyangyangyangshan/article/details/38458169 在页面中用到弹出新页面的情况比较多的&#xff0c;一般来说都是使用JS方法showModalDialog("新页面相对路径?参数1&参数2",window,"新页面样式");然后会新弹出一个模态的page页。…

运维人员日常工作(转自老男孩)

1&#xff09;运维人员要谨记的6个字&#xff1a; 运维人员做事需遵循&#xff1a;简单、易用、高效 &#xff08;2&#xff09;运维人员服务的3大宗旨&#xff1a; 1、企业数据安全保障。 2、7*24小时业务持续提供服务。 3、不断提升用户感受、体验。 &#xff08;3&#xff0…

c# 操作DatatTable

dtTemp.Columns.Add("列名");//增加一列 dtTemp.Columns.Remove("列名");//删除一列 dtTemp.Columns["旧列名"].ColumnName "新列名";//修改列名 dtTemp.Columns["列名1"].SetOrdinal(dtTemp.Columns["列名2"].O…

java 二进制 归属权限_【Java EE 学习 75 上】【数据采集系统第七天】【二进制运算实现权限管理】【权限分析和设计】...

一、权限计算相关分析1.如何存储权限首先说一下权限保存的问题&#xff0c;一个系统中最多有多少权限呢&#xff1f;一个大的系统中可能有成百上千个权限需要管理。怎么保存这么多的权限&#xff1f;首先&#xff0c;我们使用一个数字中的一位保存一种权限&#xff0c;那么如果…

MongoDB性能测试

因此&#xff0c;今天早上&#xff0c;我在mongo shell中四处乱逛。 我想出了三种不同的方式来聚合所需的数据&#xff0c;但不确定随后应移植哪种代码以在应用程序中使用。 那么&#xff0c;我将如何决定实施哪种方法呢&#xff1f; 好吧&#xff0c;让我们选择性能最佳的产品…

$_SERVER[SCRIPT_NAME]、$_SERVER[PHP_SELF]、$_SERVER[QUERY_STRING]、$_SERVER[REQUEST_URI]

1、$_SERVER["SCRIPT_NAME"] 说明&#xff1a;包含当前脚本的路径 2、$_SERVER["PHP_SELF"] 说明&#xff1a;当前正在执行脚本的文件名 3、$_SERVER["QUERY_STRING"] 说明&#xff1a;查询(query)的字符串 4、$_SERVER["REQUEST_URI"…

yii2增删改查及AR的理解

yii2增删改查 // 返回 id 为 1 的客户 $customer Customer::findOne(1); // 返回 id 为 1 且状态为 *active* 的客户 $customer Customer::findOne([ id > 1, status > Customer::STATUS_ACTIVE, ]); // 返回id为1、2、3的一组客户 $customers Customer::findAll([1, …

GWT和HTML5 Canvas演示

这是我对GWT和HTML5 Canvas的第一个实验。 我的第一个尝试是创建矩形&#xff0c;仅用几行代码就得出了这样的内容&#xff1a; 码&#xff1a; public class GwtHtml5 implements EntryPoint {static final String canvasHolderId "canvasholder";static final St…

mysql 平均值 排序_MySQL按平均两个平均值排序

我正在竞赛网站上工作,有两种类型的用户,普通网站成员和评委.每个人都可以使用拖放工具按照他们选择的顺序对特定比赛中的条目进行排序.完成后,相关的条目ID将附加一个排名值,然后可用于确定比赛中哪个条目获得最高的平均分数.获胜者实际上将通过平均每组的平均值来确定.我希望…

Solr管理界面详解

转载于:https://www.cnblogs.com/gslblog/p/6553813.html

iconv编码转换指令

看到一个不错的指令iconv&#xff0c;可以对文件编码进行转换&#xff0c;记录如下: iconv --list 列出所有支持转换的编码 icon -f code1 -t code2 filename -o newfile -f 即from 原来的编码 -t 即to 新的编码 filename 待转换的文件名 -o newfile 要输出的文件名 转载于:htt…

使用Spring Roo进行快速云开发–第2部分:VMware Cloud Foundry

Spring Roo是在Java平台上提供快速应用程序开发的工具。 我已经解释了何时使用它&#xff1a; http : //www.kai-waehner.de/blog/2011/04/05/when-to-use-spring-roo 。 Spring Roo目前支持两种针对云计算的解决方案&#xff1a;Google App Engine&#xff08;GAE&#xff09;…

java程序日期转换_Java 日期转换详解及实例代码

Java 日期转换涉及的核心类&#xff1a;Date类、SimpleDateFormat类、Calendar类一、 Date型与long型Date型转换为long型Date date new Date();//取得当前时间Date类型long date2long date.getTime();//Date转longlong型转换为Date型long cur System.currentTimeMills();//取…

软件设计之思想

编程用何种语言不重要&#xff0c;重要的是其设计思想。转载于:https://www.cnblogs.com/redfull/p/6554898.html

asp.net 与 java 2017_[ASP.net教程]C#与JAVA学习感悟

[ASP.net教程]C#与JAVA学习感悟0 2015-10-06 23:00:07C#与JAVA学习感悟学完C#与JAVA&#xff0c;感觉收获良多。C#与JAVA这两门语言相似度很高(了解它们早期历史的人可能知道为什么)&#xff0c;也许很多人在学习JAVA(或C#)时会同时学习C#(或JAVA)&#xff0c;因为它们太相似了…