webpack基础教学,简单易懂(一)(什么是webpack以及webpack的基本使用)

前端工程化webapck

什么是前端工程化

前端工程化指的是:在企业级的前端项目开发中,把前端开发所需的工具技术流程经验等进行规范化、标准化

前端工程化的解决方案

早期的前端工程化解决方案:

  • grunt( https://www.gruntjs.net/ )
  • gulp( https://www.gulpjs.com.cn/ )

目前主流的前端工程化解决方案:

  • webpack( https://www.webpackjs.com/ )
  • parcel( https://zh.parceljs.org/ )

webpack的基本使用

什么是webpack

概念:webpack 是前端项目工程化的具体解决方案。

主要功能:它提供了友好的前端模块化开发支持,以及代码压缩混淆、处理浏览器端 JavaScript 的兼容性性能优化等强大的功能。

好处:让程序员把工作的重心放到具体功能的实现上,提高了前端开发效率和项目的可维护性。

使用webpack

我们拿一个项目来演示webpack的使用过程,一步步带着大家来使用和配置webpack
我们就简单来做一个文字带有背景的颜色的例子,方便大家理解

1. 我们先建立一个空白文档

  1. 我们先新建一个src的文件夹
  2. 在src的目录下,我们新建index.html,index.css,index,js这三个文件
  3. 我们在终端输入npm init –y 这个命令,初始化包管理配置文件 package.json
    webpack基础教学,简单易懂(一)(什么是webpack以及webpack的基本使用)_第1张图片
    webpack基础教学,简单易懂(一)(什么是webpack以及webpack的基本使用)_第2张图片

如图所示,我们这几个文件都建好了,然后我们开始往这三个文件里面去加一些内容
index.html:


<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
head>

<body>
    <div>这是一段文字div>
body>

html>

这里我打算用jQuery+es6的东西来给这个页面加样式,这个时候我们需要下一个jQuery的包
我们在终端中输入

npm i juqery -S

来下载出jQuery的包供我们来使用,这里我怕有伙伴们不知道这行代码啥意思所以解释以下

npm 是包的意思
i是install的意思,写install也行
jQuery是我们要下的包
-S是模块写入到 dependencies对象

这个是npm的知识点了,就说到这里了

webpack基础教学,简单易懂(一)(什么是webpack以及webpack的基本使用)_第3张图片
如图所示,这里我们下完了jQuery的包啦!
webpack基础教学,简单易懂(一)(什么是webpack以及webpack的基本使用)_第4张图片
然后,我打算通过 ES6 模块化的方式导入 jQuery,
index.js:

//使用ES6导入语法,导入jQuery
import $ from 'jquery'
//定义jQuery入口函数
$(function(){
    $('div').css('background-color','pink')
})

然后在index.html导入后发现它报错了,显示是个语法错误,其实它并不错,而是这个语法比较高级,它识别不了
webpack基础教学,简单易懂(一)(什么是webpack以及webpack的基本使用)_第5张图片
这回我们就要用webpack来解决这个问题了

2. 在项目中安装 webpack

在终端运行如下的命令,安装 webpack 相关的两个包:

npm install [email protected] [email protected] -D

webpack基础教学,简单易懂(一)(什么是webpack以及webpack的基本使用)_第6张图片
如图,安装成功
webpack基础教学,简单易懂(一)(什么是webpack以及webpack的基本使用)_第7张图片

3. 在项目中配置 webpack

1.我们在项目根目录中,新创建名为 webpack.config.js 的 webpack 配置文件,并初始化如下的基本配置
webpack基础教学,简单易懂(一)(什么是webpack以及webpack的基本使用)_第8张图片
这个mode里面,我们可以选两个值

  1. development 开发环境 不会对打包生成的文件进行代码压缩和性能优化 打包速度快,适合在开发阶段使用
  2. production 生产环境 会对打包生成的文件进行代码压缩和性能优化 打包速度很慢,仅适合在项目发布阶段使用

同时,有的小伙伴会问,这个webpack.config.js文件有什么用

webpack.config.js 是 webpack 的配置文件。webpack
在真正开始打包构建之前,会先读取这个配置文件,从而基于给定的配置,对项目进行打包。

注意:由于 webpack 是基于 node.js 开发出来的打包工具,因此在它的配置文件中,支持使用 node.js 相关的语法和模块进行 webpack 的个性化配置

2.在 package.json 的 scripts 节点下,新增 dev 脚本如下:
webpack基础教学,简单易懂(一)(什么是webpack以及webpack的基本使用)_第9张图片
3. 在终端中运行 npm run dev 命令,启动 webpack 进行项目的打包构建

webpack基础教学,简单易懂(一)(什么是webpack以及webpack的基本使用)_第10张图片

我们会发现,在根目录下,自动给我们新建了一个dist文件夹,里面有个main.js文件
webpack基础教学,简单易懂(一)(什么是webpack以及webpack的基本使用)_第11张图片
这个就是webpack给我们打包好的文件
然后,我们在index.html中导入main.js文件
webpack基础教学,简单易懂(一)(什么是webpack以及webpack的基本使用)_第12张图片
我们在运行一下这个界面,会发现
webpack基础教学,简单易懂(一)(什么是webpack以及webpack的基本使用)_第13张图片
诶!运行成功了!

webpack的默认约定

我们发现,webpack打包后给我们自动生成了dist文件夹和main.js文件,这是为什么呢,我们可以修改它们的名字吗?

在 webpack 4.x 和 5.x 的版本中,有如下的默认约定:

  1. 默认的打包入口文件为 src -> index.js
  2. 默认的输出文件路径为 dist -> main.js

但是!既然是默认的,就代表我们是可以修改它的

自定义打包的入口与出口

在 webpack.config.js 配置文件中,通过 entry 节点指定打包的入口。通过 output 节点指定打包的出口。示例代码如下:
webpack基础教学,简单易懂(一)(什么是webpack以及webpack的基本使用)_第14张图片
路径和名字自行修改可以了!修改后重新在终端启动一下

npm run dev

你可能感兴趣的:(webpack,webpack,前端,javascript)