前端自动化构建工具之webpack入门——简单入门
写在前面
这篇博客也是参照别人的webpack入门,加上自己的一些操作,还有我在此过程中遇到的困难。如果是已经入门的或者这方面的高手,请绕行,也请勿吐槽。
正文开始
我们为什么要学习webpack
首先,我们为什么要学习前端自动化构建工具,我开始了解自动化构建工具的时候觉得很麻烦,要配环境,还要敲命令,就为了把那些文件都打包在一个叫bundle.js的文件里?那有什么意义?
看了半天文档,也没明白到底有啥好处。于是去参照了前辈的博客。
- 模块化,让我们可以把复杂的程序细化为小的文件;
- 类似于TypeScript这种在JavaScript基础上拓展的开发语言:使我们能够实现目前版本的JavaScript不能直接使用的特性,并且之后还能转换为JavaScript文件使浏览器可以识别;
- Scss,less等CSS预处理器等等。
好了,现在我们明白,为什么要使用他了。
webpack工作方式
Webpack的工作方式是:把你的项目当做一个整体,通过一个给定的主文件(如:index.js),Webpack将从这个文件开始找到你的项目的所有依赖文件,使用loaders处理它们,最后打包为一个(或多个)浏览器可识别的JavaScript文件。
正式开始
在此之前需要安装node的环境,具体方法请百度。
第一步,新建 一个文件夹,这里我叫webpackstudy,然后使用命令行进入。
第二步,安装,如果你想其他的文件也可以使用,推荐安装全局的,否则的话就安装一个局部的。
全局安装:npm install -g webpack
安装到项目目录:npm install --save-dev webpack
这样一串黄色的显示完,就安装好了。
初始化项目:npm init
做完这个步骤后,在你的项目中会出现这个文件
输入这个命令,命令行会提示你输入一系列的信息,如果不准备发布的话,回车就行了。
package.json文件已经就绪,我们在本项目中安装Webpack作为依赖包
// 安装Webpack npm install --save-dev webpack
回到之前的空文件夹,并在里面创建两个文件夹,app文件夹和public文件夹,app文件夹用来存放原始数据和我们将写的JavaScript模块,public文件夹用来存放之后供浏览器读取的文件(包括使用webpack打包生成的js文件以及一个index.html
文件)。接下来我们再创建三个文件:
-
index.html
--放在public文件夹中; -
Greeter.js
-- 放在app文件夹中; -
main.js
-- 放在app文件夹中;
文件夹的结构如下:
我们在index.html中写如下代码,他的目的是为了引入打包后的js文件bundle.js
在Greeter.js中写如下代码,这个文件的作用是,为了给index页面创建结点并插入语句
在main.js中写如下语句:
昨晚把下半部分写好了,但是提交的时候一直提示我有敏感文字,我修改之后第二次点击提交没有任何提示,也不知道提交成功没有,但是刷新的话,会重新加载,之前写好的会消失,因此我只有把它存到word里,然后再复制过来,复制过来图片又要重新替换进来。但是我试了很多次之后还是提示有敏感文字,于是我往复5次之后没有提交成功,我觉得这是一个bug,因此我将下半部分提交到了简书上。欢迎大家阅读。
原文发布时间为:2018年03月19日
原文作者:铸剑为犁413
本文来源:开源中国 如需转载请联系原作者
低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。
持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。
转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。
- 上一篇
JavaScript Scoping & Hoisting
var a = 1; function foo() { if (!a) { var a = 2; } alert(a); }; foo(); 上面这段代码在运行时会产生什么结果? 尽管对于有经验的程序员来说这只是小菜一碟,不过我还是顺着初学者常见的思路做一番描述: 创建了全局变量a,定义其值为1 创建了函数foo 在foo的函数体内,if语句将不会执行,因为!a会将变量a转变成布尔的假值,也就是false 跳过条件分支,alert变量a,最终的结果应该是输出1 嗯,看起来无懈可击的推理啊,但让人惊讶的是:答案竟然是2!为什么? 别着急,我会解释给你听。首先我要告诉你这不是什么错误,而是 JavaScript 语言解释器的一个(非官方的)特性,某人(Ben Cherry)把这个特性叫做:Hoisting(目前尚未有标准的翻译,比较常见的是提升)。 声明与定义 为了理解 Hoisting,我们先来看一个简单的情况: var a = 1; 你是否想过,上面这句代码在运行的时候到底发生了什么? 你是否知道,就这句代码而言,“声明变量a” 和 “定义变量a”这两个说法哪一个才是正确的? 下例叫做...
- 下一篇
Guido 转身离去,Python 何去何从?
【新智元导读】Python之父Guido van Rossum因最近的“PEP 572”事件宣布放弃他在Python社区“仁慈大君”的称号,且没有任命继任者,并将治理问题留给了核心开发人员。今后的PEP572乃至整个Python该何去何从? Guido van Rossum最近宣布,他决定放弃他在Python社区“仁慈大君”的称号,虽然这令人有些意外,但在核心开发社区却并没有太大的震惊。虽然最近的“PEP 572混乱”事件是不幸的,但 Van Rossum几年来一直在为Python暗暗的做着努力。 与此同时,该项目需要弄清楚如何管理自己前进 - Rossum没有任命继任者,并将治理问题留给了核心开发人员。 在过去的几年里,Rossum一直燃烧着他的热情,起码在一定程度上是因为他一直在为自己感兴趣的PEPs进行有争议的讨论。关于PEP
相关文章
文章评论
共有0条评论来说两句吧...
文章二维码
点击排行
推荐阅读
最新文章
- CentOS7,CentOS8安装Elasticsearch6.8.6
- Docker使用Oracle官方镜像安装(12C,18C,19C)
- CentOS6,7,8上安装Nginx,支持https2.0的开启
- SpringBoot2配置默认Tomcat设置,开启更多高级功能
- Docker快速安装Oracle11G,搭建oracle11g学习环境
- SpringBoot2整合Redis,开启缓存,提高访问速度
- MySQL8.0.19开启GTID主从同步CentOS8
- SpringBoot2整合MyBatis,连接MySql数据库做增删改查操作
- CentOS8编译安装MySQL8.0.19
- CentOS8安装Docker,最新的服务器搭配容器使用