前端自动化构建工具之webpack入门——简单入门

简介: 这篇博客也是参照别人的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

145737_uXsT_3802541.png

这样一串黄色的显示完,就安装好了。

初始化项目:npm init

做完这个步骤后,在你的项目中会出现这个文件145905_1XYd_3802541.png

输入这个命令,命令行会提示你输入一系列的信息,如果不准备发布的话,回车就行了。

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文件夹中;

 文件夹的结构如下:

150631_rr3R_3802541.png

150648_cYAY_3802541.png150716_58GQ_3802541.png

我们在index.html中写如下代码,他的目的是为了引入打包后的js文件bundle.js

150921_Fx64_3802541.png

在Greeter.js中写如下代码,这个文件的作用是,为了给index页面创建结点并插入语句

151428_6a7H_3802541.png

在main.js中写如下语句:

151747_RhyA_3802541.png

昨晚把下半部分写好了,但是提交的时候一直提示我有敏感文字,我修改之后第二次点击提交没有任何提示,也不知道提交成功没有,但是刷新的话,会重新加载,之前写好的会消失,因此我只有把它存到word里,然后再复制过来,复制过来图片又要重新替换进来。但是我试了很多次之后还是提示有敏感文字,于是我往复5次之后没有提交成功,我觉得这是一个bug,因此我将下半部分提交到了简书上。欢迎大家阅读。

下半部分链接

原文发布时间为:2018年03月19日
原文作者:铸剑为犁413

本文来源:开源中国 如需转载请联系原作者

目录
相关文章
|
3天前
|
前端开发 JavaScript 架构师
Webpack模块联邦:微前端架构的新选择
Webpack的模块联邦是Webpack 5引入的革命性特性,革新了微前端架构。它允许独立的Web应用在运行时动态共享代码,无需传统打包过程。基本概念包括容器应用(负责加载协调)和远程应用(独立应用,可暴露模块)。实现步骤涉及容器和远程应用的`ModuleFederationPlugin`配置,以及在应用间导入和使用远程模块。模块联邦的优势在于独立开发、按需加载、版本管理和易于维护。通过实战案例展示了如何构建微前端应用,包括创建容器和远程应用,以及消费远程组件。高级用法涉及动态加载、路由集成、状态管理和错误处理。
13 3
|
4天前
|
缓存 前端开发 JavaScript
Webpack作为模块打包器,为前端项目提供了高度灵活和可配置的构建流程
【6月更文挑战第12天】本文探讨了优化TypeScript与Webpack构建性能的策略。理解Webpack的解析、构建和生成阶段是关键。优化包括:调整tsconfig.json(如关闭不必要的类型检查)和webpack.config.js选项,启用Webpack缓存,实现增量构建,代码拆分和懒加载。这些方法能提升构建速度,提高开发效率。
25 3
|
9天前
|
前端开发
前端react入门day02-React中的事件绑定与组件
前端react入门day02-React中的事件绑定与组件
|
10天前
|
存储 SQL 运维
使用PowerShell进行自动化脚本编写:入门与实战
【6月更文挑战第6天】本文介绍了PowerShell作为Windows系统管理的自动化工具,用于提升效率和减少错误。内容涵盖PowerShell基础,如变量、命令执行、管道、条件和循环语句、函数。实战案例展示了如何用PowerShell脚本进行文件备份。此外,还提及PowerShell的进阶功能,如模块、远程管理和与其他工具集成。学习和应用PowerShell能有效提升IT运维自动化水平。
|
11天前
|
前端开发
前端基础学习(一)HTML入门
前端基础学习(一)HTML入门
9 0
前端基础学习(一)HTML入门
|
14天前
|
Web App开发 IDE 测试技术
使用Selenium进行自动化测试:从入门到实践
【6月更文挑战第1天】本文介绍了使用Selenium进行自动化测试的基础知识,包括Selenium工具集的三大组件:WebDriver、IDE和Grid。Selenium支持多种浏览器和编程语言接口。文中详细阐述了安装配置过程,如安装浏览器驱动和Selenium库,并提供了一个Python示例,演示如何初始化WebDriver、打开网页、操作元素及关闭浏览器。此外,文章指出Selenium可扩展实现更复杂测试,可与其他测试框架结合以提升测试效率。
|
29天前
|
JSON JavaScript 前端开发
web前端入门到实战:32道常见的js面试题,2024年最新秋招是直接面试吗
web前端入门到实战:32道常见的js面试题,2024年最新秋招是直接面试吗
|
29天前
|
JavaScript 前端开发 程序员
web前端入门到实战:32道常见的js面试题(1),面试哪些
web前端入门到实战:32道常见的js面试题(1),面试哪些
|
29天前
|
移动开发 前端开发 JavaScript
WebPack面试题总结,2024年最新web前端面试自我介绍
WebPack面试题总结,2024年最新web前端面试自我介绍