一天浓缩学习webpack经过

熟话说浓缩就是精华,哈哈,所以就这么简单粗暴的介绍下吧,写下的都是精华。

已经不是第一次听说webpack,但是我的起步有点晚,现在才看。开门见山~~

1.什么是webpack?

  webpack是当下最热门的前端资源模块化管理和打包工具(就是一个打包器),可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源,还可以将需要加载的模块进行代码分离,等到实际需要的时候再进行异步加载。通过loader的转换,任何资源都可以视作模块,如COMMONJS模块 ,AMD模块,JS CSS ,JSON 等 ,它会根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源。

2.为什么要有webpack等打包器?

   平常的模块加载方式都是在<script>标签里引入,这种情况是在全局作用模式window下的,这样做的弊端就是只能按<script>的书写顺序进行加载,而且全局作用域下容易产生冲突,引入数量比较多的文件情况下难以管理。

   而且,如果单独请求每个模块会造成请求次数过多,导致应用启动缓慢,但是,将所有文件压缩成一个文件,一次请求加载所有模块会导致流量的浪费,初始化过程缓慢。

  所以编译的时候对所有的代码进行静态分析,fenix出各个模块的类型及依赖关系,然后将他们提交给适配的加载器处理,所以webpack就应运而生。

3.COMMONJS模块,AMD模块,CMD模块,UMD模块几种常用模块?

Commonjs:允许模块通过require方法同步加载所需依赖的其他模式,然后通过exports或module.exports来导出需要暴露的接口。

eg: require("module");

       require("./script.js");

       export.doStuff=function(){};

       module.exports=someValue;

优点:各个模块可以进行重用,npm中已经有许多可供使用的包。

缺点:只能是同步加载的,同步就意味着阻塞加载,所以不适合在浏览器环境中,因为浏览器的资源是同步加载的,不能非阻塞的并行加载多个模块。

应用实例:nodejs

Amd模块:它是在声明模块的时候就指定所有的依赖dependencies,并且还要当做形参传到factory中,对于依赖的模块提前执行依赖前置。

eg:  define("module", ["dep1", "dep2"], function(d1, d2){ return someExportedValue; });

   require(["module", "../file"],

   function(module, file) { /* ... */ });

优点:适合异步加载模块,在浏览器环境中,并且可以并行运行多个模块。和commonjs相反。

缺点:提前加好所有依赖,代码要复杂很多。

应用实例:requirejs,curl

Cmd模块:和AMD类似,并和Commonjs也有很大的兼容性。

eg: define(function(require, exports, module){

  var $ = require('jquery');

  var Spinning = require('./spinning');

  exports.doSomething = ... module.exports = ... })

优点:容易在nodejs中运行你的代码

缺点:依赖spm打包,模块的加载逻辑比较重、

应用实例:Sea.js

Umd模块:主要解决模块定义的跨平台问题

eg:  import "jquery";

   export function doStuff() {}

   module "localModule" {}

优点:容易进行静态分析,面向未来的ES标准;

缺点:原生浏览器不支持。

4.如何使用webpack?

假装你的电脑里面已经安装了Node.js, 然后输入:npm install webpack -g  ,可以通过webpack -h来查看安装信息。

(1).假装创建一个项目test,进入项目路径,创建一个index.html页面,代码如下图:

(2)然后再创建一个名为:bundle.js的文件,在上图的index.html中引入它。此文件里面什么代码都不需要写。

(3)在创建一个名为entry.js的文件,不需要在index.html页面引入哟,此文件里面用来写内容。

/**entry.js**/

document.write("hello world");

(4)然后将entry.js打包进bundle.js文件中,webpack会分析入口文件,解析包含依赖关系的各个文件,然后打包到bundle.js中

webpack entry.js bundle.js

webpack打包的原理就是给每一个模块都分配一个唯一的id并通过这个id索引和访问模块,启动时,会先执行entry.js里面的代码,其他模块会在运行require的时候执行。

(5)此时打开bundle.js文件查看,你就可以发现里面已经 有代码了:

(6)运行inde.html页面,在浏览器中就可以看到Hello world.

但是webpack本身是只能处理javascript模块的,如果碰到css,json等其他模块文件,就需要使用loader转换。 loader就是一个装换器,一个可以输入任何资源但是最终都会帮你转成js模块的工具。

总的来说loader有以下几点:

   1.管道方式链式调用(允许多个文件转换,最后必定输出js文件) 。 2.loader可以同步或异步执行  3.倘若在nodejs环境下,可以做任何事情  4.loader加载时可以接受传参。 

   5.可以通过文件扩展名来绑定不同类型的文件。 6.loader是通过Npm发布和安装。7.通过定义package.json来指定,同样也可以导出一个loader来使用,命名规则是:xxx-loader。一般是什么功能就命名什么。

下面就直接来试试:

(1)在项目里面在新建一个名为:style.css的文件:输入 body{ background:green}

(2)修改entry.js  加入这一句  require("!style-loader!css-loader!./style.css")

(3)安装Loader.  npm install css-loader style-loader     先用css-loader读取它,再用style-loader将它插入页面中。

(4)重新打包:webpack entry.js bundle.js

(5)刷新index.html页面可以看到效果。

如果有错误,cmd打包时就会显示,index.html运行时,fireug也会显示的。

loader转换器还可以通过配置文件来执行哟

(1)通过往package.json里面新增配置项来完成。deDependencies

(2)在新配置个webpack.config.js文件

var webpack = require('webpack')

module.exports = {
resolve: { fallback: path.join(__dirname, "node_modules") },
resolveLoader: { fallback: path.join(__dirname, "node_modules") },
entry: './entry.js',
output: {
path: __dirname,
filename: 'bundle.js'
},
module: {
loaders: [
{test: /\.css$/, loader: 'style!css'}
]
},
plugins:[
new webpack.BannerPlugin('This file is created by yu')
]

}


(3)直接运行webpack ,刷新index.html 就可以查看效果




 

学习Webpack的最佳方法是按照以下步骤进行: 1. 理解前端工程化概念:Webpack是一个前端模块打包工具,它的目标是将各种资源,如JavaScript、CSS、图片等,打包成最优化的静态资源。在学习Webpack之前,建议先了解前端工程化的概念和相关工具。 2. 掌握基本概念:Webpack有一些重要的概念,如入口(entry)、出口(output)、加载器(loader)、插件(plugins)等。了解这些概念是学习Webpack的关键。 3. 阅读官方文档:Webpack有详细而全面的官方文档,可以在Webpack官方网站上找到。阅读官方文档是学习Webpack的最佳途径,因为它提供了全面而详细的解释和示例。 4. 实践项目:在学习Webpack的过程中,最好通过实践项目来巩固所学知识。可以选择一个简单的项目,通过Webpack来构建和优化,逐步掌握Webpack的各项功能和配置。 5. 学习常用插件:Webpack有很多常用的插件,如HtmlWebpackPlugin、MiniCssExtractPlugin、CleanWebpackPlugin等。学习并掌握这些插件的使用方法,可以帮助你更好地使用Webpack来构建项目。 6. 参考优秀资源:除了官方文档外,还可以参考一些优秀的资源,如博客文章、视频教程、开源项目等。这些资源可以提供更多实用的示例和经验分享,帮助你更好地理解和应用Webpack。 记住,Webpack是一个强大而复杂的工具,需要花费一些时间和精力来学习和掌握。坚持不懈地学习和实践,你将能够熟练地使用Webpack来构建高效的前端项目。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值