前端自动化构建工具之webpack入门——简单入门
2018-03-19 00:00
771 查看
写在前面
这篇博客也是参照别人的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,因此我将下半部分提交到了简书上。欢迎大家阅读。
下半部分链接
相关文章推荐
- 前端自动化构建工具webpack简单入门——2
- 前端自动化构建工具Webpack开发模式入门指南 (网上看到的,写得很详细)
- 微信牛牛平台搭建前端自动化构建工具之webpack入门
- 前端开发自动化工作流工具,JavaScript自动化构建工具grunt、gulp、webpack介绍
- 前端自动化构建入门6-使用webpack改造我们的react应用
- 前端开发自动化工作流工具,JavaScript自动化构建工具grunt、gulp、webpack介绍
- webpack前端构建工具学习总结(四)之自动化生成项目中的html页面
- 从Npm Script到Webpack,6种常见的前端构建工具对比
- 用webpack实现前端自动化构建
- JavaScript自动化构建工具grunt、gulp、webpack介绍
- JavaScript自动化构建工具grunt、gulp、webpack介绍
- 一天掌握前端三大构建化工具Grunt、Gulp、Webpack(上)
- webpack 入门(一个简单打包配置构建)
- 关于web性能的思考与分享[05]——gulp自动化构建工具入门教程
- webpack前端构建工具学习总结(二)之loader的使用
- Gulp前端自动化构建工具介绍及入门
- 【WEB】Grunt入门——前端自动化工具
- 深入浅出的webpack4构建工具---比mock模拟数据更简单的方式(二十一)
- 做一个合格的前端,gulp自动化构建工具入门教程
- webpack前端构建工具学习总结(三)之webpack.config.js配置文件