1.webpack从安装到打包

本文讲解基于webpack4。

一、为什么要使用webpack?

如今项目越做越大,越来越复杂,前端工程化就成为了必不可少的一环。我们知道,工程化是系统化,模块化,规范化的过程,而在这个过程中,webpack是一个非常重要的工具。

一、安装

webpack基于node环境

1.全局安装:npm install webpack webpack-cli -g
2.查看是否安装成功:webpack -v

此处有一个需要注意的地方是,webpack3没有webpack-cli


二、webpack的一些概念

1.webpack必须有入口与出口,即entry与output

  • entry:打包的起点,webpack必须得有一个入口让它知道从哪里开始。
  • output:处理完成后,结果文件输出到哪。

2.webpack.config.js是webpack的配置文件,也是项目的入口文件。当然,如果你的配置文件不叫webpack.config.js,需要额外指定一下。


三、基础打包

1.首先我们在一个空文件夹下新建一个webpack.config.js。在其中暴露一个对象,写上入口与出口。
![在这里插入图片描述](https://img-blog.csdnimg.cn/20191222161614997.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L09yYWxpbmdl,size_16,color_FFFFFF,t_70
这里我新建了一个app.js作为入口文件,其中内容如下。
在这里插入图片描述

2.项目初始化

  • 项目打包必须进行项目初始化。
  • 调用 npm init 来初始化 package.json,它是 NodeJS 约定的用来存放项目的信息和配置等信息的文件。
npm init -y  (y --》代表yes ,省去了默认选项点击)

初始化完成后,目录下出现 package.json。
在这里插入图片描述
3.打包

命令:webpack

命令运行以后,可以看到,已经打包成功了。
在这里插入图片描述
4.mode
虽然打包成功了,但是发现报了一个警告。

  • 有关mode
    这里需要说明一下,mode是webpack4的属性,用来设置开发模式还是生产模式。
    webpack有一个理念就是减少他的配置文件。我们在前面可以看出,如果没有设置mode,main.js中的代码是压缩的。
    在这里插入图片描述
    我们把mode设置为development之后,你不用做任何事,运行webpack后它的代码就不压缩了。
    在这里插入图片描述
执行webpack

在这里插入图片描述
当然,对应的,mode设置为production以后,main.js中的代码是压缩的。

 mode:'production'
  • 这里值得一提的是,在webpack3中,如果你不去写一些压缩的配置,是没有属性提供你去做代码压缩的。

三、全局与局部

上面我们不难看出,这个项目的打包一直在用全局的webpack打包。
在实际工作中,我们的打包却不是这样的。以vue为例,我们在项目中运行npm run build就会进行打包。这里,我们将实现这样的功能。

未完待续…

评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值