webpack4 入门最简单的例子介绍


Posted in Javascript onSeptember 05, 2018

webpack在目前来说应该是前端用的比较多的打包工具了,那么对于之前没有接触过这块的该怎么办呢?答案很明显嘛,看资料,查文档,自己去琢磨,自己去敲一敲,跑一跑;

Webpack是当下最热门的前端资源模块化管理和打包工具,它可以将很多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源,还可以将按需加载的模块进行代码分割,等到实际需要的时候再异步加载。

webpack和Grunt以及Gulp相比有什么特性

Gulp/Grunt是一种能够优化前端的开发流程的工具,而WebPack是一种模块化的解决方案,不过Webpack的优点使得Webpack可以替代Gulp/Grunt类的工具。

Grunt和Gulp的工作方式是:在一个配置文件中,指明对某些文件进行类似编译、组合、压缩等任务的具体步骤。

webpack的工作方式是:把你的项目当做一个整体,通过一个给定的主文件(如:index.js),Webpack将从这个文件开始找到你的项目的所有依赖文件,使用loaders处理它们,最后打包为一个浏览器可识别的JavaScript文件。

那么,这边我将以一个最基础的例子来将这个流程跑一边,包括过程中会遇到哪些问题,怎么解决的,也会一一奉上;

第一步:

我们需要安装npm,这个只要你有NodeJS运行环境的肯定会有的;这边这个块也就不作叙述

第二步:

我们接下来会选择在项目目录中进行所有的安装和操作,不去选择全局安装;

在电脑任意盘中新建一个项目文件夹,如:webpackdemo

 webpack4 入门最简单的例子介绍webpack4 入门最简单的例子介绍

接下来我们通过cmd进入到这个项目文件夹下,并输入执行npm init,回车,进行初始化:

webpack4 入门最简单的例子介绍

接下来,对于package name之类的配置项,我们完全选择直接回车,到底!

webpack4 入门最简单的例子介绍

到这一步,就OK了!

此时我们的项目文件夹里就多了一个文件:package.json

第三步:

既然要使用webpack进行打包,那么我们就要来安装webpack了,起初我们就说过都在项目文件夹里完成,不做全局安装;那么接下来输入npm install --save-dev webpack,回车进行安装:

webpack4 入门最简单的例子介绍

此时我们的项目文件夹,已经又多了一个文件夹和一个json文件:

webpack4 入门最简单的例子介绍

第四步:

我们现在可以开始写自己的项目了,那么我这边也就按通常各位大牛分享的例子来写,首先,在项目文件夹下,新建两个文件加app和public;

app文件夹中写入test.js和main.js;public文件夹中写入index.html;

借鉴一下别人的例子:

index.html

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <title>Webpack demo</title>
</head>
<body>
 <div id='root'></div><br><br> 
<!--引入打包之后的文件-->
<script src="bundle.js"></script> 
</body>
</html>

test.js

<!--写入js,创建div元素,写入一句话,并且导出test.js这个模块--><br>module.exports = function() {

 var test= document.createElement('div');

 test.textContent = "Hi there and testing!";

 return test;

};

main.js

<!--导入test模块,将内容添加到#root这个div中--><br>var test= require('./test.js');

document.getElementById('root').appendChild(test());

第五步:

按道理,现在已经可以进行打包处理了,最后的结果就是将main.js作为主入口进行操作,最后在public文件夹中生成一个打包OK之后的文件:bundle.js;然后我们打开index.html文件就会在页面显示我们刚才的那句话了;

但是,忽略了一个问题,那就是我们的配置文件怎么办呢?都在命令行去操作吗?这肯定是很麻烦且不赞成的,那么我们就在项目目录下再建一个文件:webpack.congfig.js,在里面写入配置文件:

module.exports = {
 entry: __dirname + "/app/main.js",//入口文件
 output: {
 path: __dirname + "/public",//打包后的文件存放目录
 filename: "bundle.js"//打包后输出文件的文件名
 }
}

这样我们就可以通过node_modules/.bin/webpack开始运行了;

问题来了:

1、报错!

webpack4 入门最简单的例子介绍

解决方式:node_modules\.bin\webpack "/"改成"\"

2、还是不行!

webpack4 入门最简单的例子介绍

还好不是原来的错误,那么这个是什么意思呢?

回看前面的截图

webpack4 入门最简单的例子介绍

倒数第二行,我们会发现我们安装的webpack的版本是 4 的,那么在4中,默认不需要配置文件(它吸收了Parcel的思想,零配置);既然思想都不一样了,是不是我们前面这么做就要去掉,重来,换成4的做法呢?很显然不愿意了,毕竟做到现在了,那么我就根据步骤一步一步的改吧;

再看这一步:

webpack4 入门最简单的例子介绍

我们顺着来,输入yes,回车,进行安装webpack-cli

安装完,已经自动运行了node_modules\.bin\webpack;

3、新的警告和报错!

心态爆炸了?不要紧,很快就要OK了!

webpack4 入门最简单的例子介绍

看前几行,是正确的运行结果,但是,查看项目文件夹时,并不是这样,原因就在后面那几行黄色,红色的警告和报错!

首先看警告,简单点,意思就是需要设置模式:4 无需配置文件,但是没说不要设置模式,模式分为两个:生产模式和开发模式;只需要--mode标记一下就OK了!

再看报错,什么意思呢,其实就是他需要一个src 文件夹,其实这个src文件夹就是我们之前的app文件夹,那么我们改下名字,app改成src;

ok,再来接受一次打击吧!

4、运行node_modules\.bin\webpack --mode development之后,还有一行错误!

webpack4 入门最简单的例子介绍

很熟悉的报错,刚才给我们报过,刚才那么改貌似没用,这下问题在哪里呢?我们打开package.json看下;

webpack4 入门最简单的例子介绍

第5行,"main":"index.js",是不是已经知道了?那我们把src里的入口文件main.js改成index.js,再运行!

成功!!!

webpack4 入门最简单的例子介绍

最后我们打包之后生成了一个新的文件main.js,并且是在一个新的文件夹dist里;

对于我们之前的webpack.congfig.js文件,完全不用去在意,因为webpack 4 默认不需要配置文件呀!

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 类似flash效果的立体图片浏览器
Feb 08 Javascript
Array栈方法和队列方法的特点说明
Jan 24 Javascript
编写高性能Javascript代码的N条建议
Oct 12 Javascript
实现JavaScript高性能的数据存储
Dec 11 Javascript
JS 调试中常见的报错问题解决方法
May 20 Javascript
JavaScript自执行函数和jQuery扩展方法详解
Oct 27 jQuery
基于jquery实现五星好评
Nov 18 jQuery
angular5 httpclient的示例实战
Mar 12 Javascript
基于vue-upload-component封装一个图片上传组件的示例
Oct 16 Javascript
详解Vue3.0 前的 TypeScript 最佳入门实践
Jun 18 Javascript
vue 扩展现有组件的操作
Aug 14 Javascript
uniapp电商小程序实现订单30分钟倒计时
Nov 01 Javascript
Vuejs2 + Webpack框架里,模拟下载的实例讲解
Sep 05 #Javascript
JS实现点击拉拽轮播图pc端移动端适配
Sep 05 #Javascript
vue中使用heatmapjs的示例代码(结合百度地图)
Sep 05 #Javascript
解决vue点击控制单个样式的问题
Sep 05 #Javascript
浅谈webpack4.x 入门(一篇足矣)
Sep 05 #Javascript
vuejs点击class变化的实例
Sep 05 #Javascript
jQuery滑动效果实现方法分析
Sep 05 #jQuery
You might like
咖啡的植物学知识
2021/03/03 咖啡文化
php获得用户ip地址的比较不错的方法
2014/02/08 PHP
php采集自中央气象台范围覆盖全国的天气预报代码实例
2015/01/04 PHP
PHP使用mysql_fetch_row查询获得数据行列表的方法
2015/03/18 PHP
php实现文件上传及头像预览功能
2017/01/15 PHP
基于thinkPHP3.2实现微信接入及查询token值的方法
2017/04/18 PHP
深入理解PHP+Mysql分布式事务与解决方案
2020/12/03 PHP
14个有用的Jquery技巧分享
2015/01/08 Javascript
javascript判断移动端访问设备并解析对应CSS的方法
2015/02/05 Javascript
js实现当复选框选择匿名登录时隐藏登录框效果
2015/08/14 Javascript
JavaScript函数内部属性和函数方法实例详解
2016/03/17 Javascript
json的使用小结
2016/06/08 Javascript
微信小程序之小豆瓣图书实例
2016/11/30 Javascript
Bootstrap整体框架之JavaScript插件架构
2016/12/15 Javascript
lhgcalendar时间插件限制只能选择三个月的实现方法
2017/07/03 Javascript
在 Node.js 中使用原生 ES 模块方法解析
2017/09/19 Javascript
vue中v-text / v-html使用实例代码详解
2019/04/02 Javascript
vue中axios的二次封装实例讲解
2019/10/14 Javascript
JS实现京东商品分类侧边栏
2020/12/11 Javascript
[52:20]VP vs VG Supermajor小组赛 B组胜者组决赛 BO3 第一场 6.2
2018/06/03 DOTA
[01:03]PWL开团时刻DAY6——别打我
2020/11/05 DOTA
Python读写docx文件的方法
2018/05/08 Python
使用HTML5的表单验证的简单示例
2015/09/09 HTML / CSS
canvas因为图片资源不在同一域名下而导致的跨域污染画布的解决办法
2019/01/18 HTML / CSS
摩顿布朗英国官方网上商店:奢华沐浴、身体和头发护理
2016/10/29 全球购物
三只松鼠官方旗舰店:全网坚果销售第1
2017/11/25 全球购物
MAC彩妆英国官网:M·A·C UK
2018/05/30 全球购物
生物化学研究助理员求职信
2013/10/09 职场文书
应用心理学个人求职信范文
2013/12/11 职场文书
党员干部承诺书
2014/03/25 职场文书
党员公开承诺书2015
2015/01/21 职场文书
2015年教师师德师风承诺书
2015/04/28 职场文书
企业法人代表证明书
2015/06/18 职场文书
实验心得体会范文
2016/01/25 职场文书
JavaScript 中for/of,for/in 的详细介绍
2021/11/17 Javascript
关于vue-router-link选择样式设置
2022/04/30 Vue.js