前端自动化构建工具之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

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

初始化项目: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

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

目录
相关文章
|
4月前
|
测试技术 持续交付 开发者
探索自动化测试的无限可能:从入门到精通
在软件开发领域,确保产品质量是至关重要的。自动化测试作为一种高效、可靠的测试方法,正逐渐成为行业标准。本文将带你深入了解自动化测试的世界,从基础概念到实践技巧,帮助你掌握这一强大的工具。无论你是初学者还是有经验的开发者,都能从中获得宝贵的知识和启发。
|
3月前
|
Java 测试技术 持续交付
【入门思路】基于Python+Unittest+Appium+Excel+BeautifulReport的App/移动端UI自动化测试框架搭建思路
本文重点讲解如何搭建App自动化测试框架的思路,而非完整源码。主要内容包括实现目的、框架设计、环境依赖和框架的主要组成部分。适用于初学者,旨在帮助其快速掌握App自动化测试的基本技能。文中详细介绍了从需求分析到技术栈选择,再到具体模块的封装与实现,包括登录、截图、日志、测试报告和邮件服务等。同时提供了运行效果的展示,便于理解和实践。
185 4
【入门思路】基于Python+Unittest+Appium+Excel+BeautifulReport的App/移动端UI自动化测试框架搭建思路
|
3月前
|
编解码 前端开发 JavaScript
从入门到精通:揭秘前端开发中那些不为人知的优化秘籍!
前端开发是充满无限可能的领域,从初学者到资深专家,每个人都追求更快、更稳定、更用户体验友好的网页。本文介绍了四大优化秘籍:1. HTML的精简与语义化;2. CSS的优雅与高效;3. JavaScript的精简与异步加载;4. 图片与资源的优化。通过这些方法,可以显著提升网页性能和用户体验。
37 3
|
3月前
|
Java 测试技术 Android开发
探索自动化测试的奥秘:从入门到精通
【10月更文挑战第37天】本文将带你进入自动化测试的世界,从基础知识到实战案例,逐步揭示自动化测试的神秘面纱。我们将一起探讨如何利用代码来简化测试过程,提高效率,并确保软件质量。无论你是初学者还是有经验的开发者,这篇文章都能为你提供有价值的见解和技巧。让我们一起踏上这段探索之旅吧!
|
3月前
|
缓存 前端开发 JavaScript
前端性能优化:Webpack与Babel的进阶配置与优化策略
【10月更文挑战第28天】在现代Web开发中,Webpack和Babel是不可或缺的工具,分别负责模块打包和ES6+代码转换。本文探讨了它们的进阶配置与优化策略,包括Webpack的代码压缩、缓存优化和代码分割,以及Babel的按需引入polyfill和目标浏览器设置。通过这些优化,可以显著提升应用的加载速度和运行效率,从而改善用户体验。
102 6
|
3月前
|
机器学习/深度学习 自然语言处理 前端开发
前端神经网络入门:Brain.js - 详细介绍和对比不同的实现 - CNN、RNN、DNN、FFNN -无需准备环境打开浏览器即可测试运行-支持WebGPU加速
本文介绍了如何使用 JavaScript 神经网络库 **Brain.js** 实现不同类型的神经网络,包括前馈神经网络(FFNN)、深度神经网络(DNN)和循环神经网络(RNN)。通过简单的示例和代码,帮助前端开发者快速入门并理解神经网络的基本概念。文章还对比了各类神经网络的特点和适用场景,并简要介绍了卷积神经网络(CNN)的替代方案。
590 1
|
3月前
|
运维 负载均衡 Ubuntu
自动化运维的利器:Ansible入门与实践
【10月更文挑战第31天】在当今快速发展的信息技术时代,高效的运维管理成为企业稳定运行的关键。本文将引导读者了解自动化运维工具Ansible的基础概念、安装步骤、基本使用,以及如何通过实际案例掌握其核心功能,从而提升工作效率和系统稳定性。
|
3月前
|
缓存 监控 前端开发
前端工程化:Webpack与Gulp的构建工具选择与配置优化
【10月更文挑战第26天】前端工程化是现代Web开发的重要趋势,通过将前端代码视为工程来管理,提高了开发效率和质量。本文详细对比了Webpack和Gulp两大主流构建工具的选择与配置优化,并提供了具体示例代码。Webpack擅长模块化打包和资源管理,而Gulp则在任务编写和自动化构建方面更具灵活性。两者各有优势,需根据项目需求进行选择和优化。
107 7
|
3月前
|
缓存 前端开发 JavaScript
前端工程化:Webpack与Gulp的构建工具选择与配置优化
【10月更文挑战第27天】在现代前端开发中,构建工具的选择对项目的效率和可维护性至关重要。本文比较了Webpack和Gulp两个流行的构建工具,介绍了它们的特点和适用场景,并提供了配置优化的最佳实践。Webpack适合大型模块化项目,Gulp则适用于快速自动化构建流程。通过合理的配置优化,可以显著提升构建效率和性能。
91 2
|
4月前
|
运维 应用服务中间件 持续交付
自动化运维的利器:Ansible入门与实践
【10月更文挑战第21天】在现代IT基础设施的管理中,自动化运维已成为提升效率、降低错误率的关键。Ansible,作为一种简单而强大的自动化工具,正被广泛应用于配置管理、应用部署和任务自动化等领域。本文将引导你了解Ansible的基本概念,通过实际案例展示如何利用Ansible简化日常运维工作,并探讨其在现代IT运维中的应用价值。无论你是新手还是有经验的系统管理员,这篇文章都将为你开启Ansible的高效之旅提供指导。

热门文章

最新文章

  • 1
    大前端之前端开发接口测试工具postman的使用方法-简单get接口请求测试的使用方法-简单教学一看就会-以实际例子来说明-优雅草卓伊凡
    35
  • 2
    【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
    22
  • 3
    巧用通义灵码,提升前端研发效率
    75
  • 4
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    135
  • 5
    详解智能编码在前端研发的创新应用
    86
  • 6
    智能编码在前端研发的创新应用
    49
  • 7
    【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    29
  • 8
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    91
  • 9
    【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
    68
  • 10
    【06】flutter完成注册页面-密码登录-手机短信验证-找回密码相关页面-并且实现静态跳转打包demo做演示-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
    25