webpack快速学习1

什么是webpack
webpack是一款模块加载器兼打包工具，它能把各种资源，例如JS（含JSX）、coffee、样式（含less/sass）、图片等都作为模块来使用和处理。
webpack的特点
丰富的插件，方便进行开发工作
大量的加载器，包括加载各种静态资源
代码分割，提供按需加载的能力
发布工具
webpack的优势
webpack 是以 commonJS 的形式来书写脚本滴，但对 AMD/CMD 的支持也很全面，方便旧项目进行代码迁移。
能被模块化的不仅仅是 JS 了。
开发便捷，能替代部分 grunt/gulp 的工作，比如打包、压缩混淆、图片转base64等。
扩展性强，插件机制完善，特别是支持 React 热插拔（见 react-hot-loader ）的功能让人眼前一亮。
下面开始学习：
1.全局安装：
npm install webpack –g
安装完成之后输入 webpack –help 通过查看提示信息来检验是否安装完成。
2.在目标标目录下输入 npm init 进行一个npm的初始化。然后一路回车，然后再进行一个本地安装npm install webpack –-save-dev
打包

1.在根目录下创建一个entry.js文件里面简单的写点东西

document.getElementById('app').textContent = 'hello'

再在根目录下创建一个index页面，并简单的写点东西，并在index里面链入一个js文件，如：bundle.js，这个js文件会通过webpack生成，这是我们的输出文件。同时index里面的id要和entry.js里的id一致

2.输入webpack entry.js bundle.js会在根目录下生成一个bundle.js的文件,此时在entry.js中你自己写入的业务代码已经打包进了bundle.js中。你可以打开bundle.js文件去查看里面的代码，可以看到你在entry.js中写入的业务代码，在最下面。

此时你打开浏览器看看index，看到个hello就对了
3.在根目录下创建一个name.js文件在里面定义一个module并暴露，再简写点东西比如：

4.在入口文件entry.js中引入name.js所暴露的借口

5.然后输入webpack entry.js bundle.js将入口文件的内容打包进bundle.js，然后在浏览器中打开页面看效果，会看到页面中会生成hellocourse webpack；
CSS文件的引入
1.这个功能是靠webpack的loader功能实现的。所以我们需要输入：npm install css-loader style-loader –save-dev 来安装这两个loader

2.在根目录下创建一个css文件，并写入一些简单的样式如：body{background：red}

3在入口文件中写入引用css的代码

此处的style！和css！是指加载的我们刚才安装的loader
4.输入webpack entry.js bundle.js命令，打包到bundle.js，然后查看index网页

说明我们的css已经已经成功的引入，也可以通过查看bundle.js中的代码，可以看到引进了许多模块。
webpack的配置文件
1.在根目录下创建一个webpack.config.js文件，然后再里面写入webpack的配置，并暴露出去。

这其中由于已经配置好了loader，所以在入口文件entry.js中的引入的两个css和style的loader就可略掉了省略

同时，在命令行中也不用专门写webpack entry.js bundle.js这样的命了，直接输入webpack命令即可，他会根据我们的配置自动去打包到bundle.js中。
2.输入webpack命令，然后查看index页面

引入成功
通过source-map来调试代码
在webpack中必须使用source-map才能够生成这些模块的源文件，才能在浏览中查看源码并进行调试。

浏览器的Sources中我们只能看index.html和bundle.js两个源文件，我们创建的entry.js和name.js是看不到的
1.输入webpack –devtool source-map

这样就会生成一个source-map

2.回到浏览器查看Sources，会多出一个webpack文件夹，里面就有我们之前创建的文件了并且也是能看到源码的

可以在name中加入一个debugger来看一下变化
3.同理，我们也可以在config文件中设置devtool来让我们像刚才一样，只需要输入一个webpack命令就能执行source-map的功能

webpack快速学习1相关推荐

webpack快速学习2
webpack结合bable的使用 bable主要是用来处理ES2015也就是ES6的,由于ES6的一些代码有的浏览器是不能直接解析的,所以就必须用bable将其转换为浏览可以解析的代码.这就是bab ...
vue中集合取第一个_快速学习Vue框架（知识点集合）
学习Vue的小伙伴速度看过来,快速学习Vue框架知识点集合贴来啦.建议收藏,尤其基础并不是很扎实的同学,本篇集合贴就是你日后工作的参考手册. 基础知识: ·vue的生命周期:beforeCreate/ ...
了不起的 Webpack HMR 学习指南（含源码分析）
学习时间:2020.06.14 学习章节:<Webpack HMR 原理解析> 一.HMR 介绍 Hot Module Replacement(以下简称:HMR 模块热替换)是 Webpa ...
业余快速学习虚幻引擎教程
仅用5小时学会虚幻引擎! 你会学到什么专为希望在业余时间打造虚幻引擎技能的艺术家和开发人员量身定制的专业技术从几何图形到材料,从照明到互动,所有方面的提示探索如何创造建筑水的效果如何使用顶点绘 ...
零基础快速学习Java技术的方法整理
在学习java技术这条道路上,有很多都是零基础学员,他们对于java的学习有着很多的不解,不知怎么学习也不知道如何下手,其实Java编程涉及到的知识点还是非常多的,我们需要制定java学习路线图这样才 ...
Webpack 4 学习09（打包生成html）
所需插件 html-webpack-plugin 本教程基于已经搭建好的webpack环境,详见Webpack 4 学习01(基础配置) **了解html-webpack-plugin** HtmlW ...
webpack入门学习手记（一）
本人微信公众号:前端修炼之路,欢迎关注. 之前用过gulp.grunt,但是一直没有学习过webpack.这两天刚好有时间,学习了下webpack.webpack要想深入研究,配置的东西比较多,网上的 ...
怎样快速学习html5,如何快速学习HTML5?带你了解HTML5学什么?
今天小编要为大家分享的文章是关于如何快速学习HTML5?HTML5主要学些什么的文章.近年来前端开发非常热门,前端开发工程师也很稀缺,于是很多人将其视为高薪行业的代名词.HTML5前端开发工程师被称作 ...
新手搭ssm要多久_如何快速学习ssm 框架？
要快速学习SSM框架,你需要一套学习曲线平滑的教程 1. 很快可以看到效果 SSM框架这种教程的,在百度或者git上一搜一大把,不过很遗憾,大部分你照着上面的流程做,是做不出来的,要么缺少包,要么配置 ...

webpack快速学习1

webpack快速学习1相关推荐

最新文章

热门文章