webpack5及babel入门学习
一、是什么
本质上,webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个 bundle。 |
---|
我们来对上面的解释进行拆解:
打包bundler
:webpack可以将帮助我们进行打包,所以它是一个打包工具
静态的static
:这样表述的原因是我们最终可以将代码打包成最终的静态资源(部署到静态服务器);
模块化module
:webpack默认支持各种模块化开发,ES Module、CommonJS、AMD等;
现代的modern
:我们前端说过,正是因为现代前端开发面临各种各样的问题,才催生了webpack的出现和发展
二、webpack的安装
webpack的安装目前分为两个:webpack、webpack-cli
那么它们是什么关系呢?
- 执行webpack命令,会执行node_modules下的.bin目录下的webpack
- webpack在执行时是依赖webpack-cli的,如果没有安装就会报错
- 而webpack-cli中代码执行时,才是真正利用webpack进行编译和打包的过程
- 所以在安装webpack时,我们需要同时安装webpack-cli(第三方的脚手架事实上是没有使用webpack-cli的,而是类似于自己的vue-service-cli的东西)
npm install webpack webpack-cli –g # 全局安装
npm install webpack webpack-cli –D # 局部安装
三、入门使用
首先通过一个简单示例,看一下webpack的作用,下面代码使用了ES模块和CommonJs模块进行导入导出,但是并没有使用webpack
,我们看一下是否能正常工作
目录结构
js文件夹下的math.js
// ES Module
export function sum(num1, num2) {
return num1 + num2;
}
js文件夹下的format.js
const priceFormat = function() {
return "¥99.88";
}
// CommonJS的导出
module.exports = {
priceFormat
}
main.js
import {
sum } from "./js/math";
const {
priceFormat } = require("./js/format");
console.log(sum(20, 30));
console.log(priceFormat());
index.html
<!DOCTYPE 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>Document</title>
</head>
<body>
<script src="./src/index.js" type="module"></script>
</body>
</html>
看运行结果
再用Live Server打开试一下
我们可以发现,无论怎样都会报错,那是因为浏览器不会直接支持识别这样的模块化代码,所以需要我们用工具去处理这个问题,所以webpack就出现了。
在刚才的文件夹根目录打开终端,输入webpack进行打包看看会怎样?
打包之后,发现多了一个dist文件夹,里面有main.js,这个main.js就是打包之后的文件,现在我们将其引入index.html,发现代码就可以正常在浏览器执行了
四、 webpack局部安装使用
一般情况下,我们都会为每一个项目单独安装webpack,并不使用全局的webpack,因为每个项目的webpack版本可能不一样
看一下局部安装的步骤
第一步:创建package.json文件,用于管理项目的信息、库依赖等
npm init
第二步:安装局部的webpack
npm install webpack webpack-cli -D
第三步:使用局部的webpack
法一:.\node_modules\.bin\webpack
法二:npx webpack
法三:在packpage.json中配置脚本"build": "webpack",然后在终端直接npm run build
安装完之后的目录
五、Webpack配置文件
1、作用及entry和output的简单使用
当我们运行webpack时,webpack会默认查找当前目录下的 src/index.js作为入口,如果当前项目中没有存在src/index.js文件,那么会报错
现在我们将上面的index.js改为main.js看一下报什么样的错
那我们就想写成main.js怎么解决这个问题,那么webpack配置文件就来了,我们可以在配置文件中指定入口文件为main.js就不会报错了。
一种指定方式就是在终端输入命令的时候指定
npx webpack --entry ./src/main.js --output-path ./build
当然开发中使用的肯定都是在配置文件中指定
我们可以在根目录下创建一个webpack.config.js文件,来作为webpack的配置文件
const path = require('path')
module.exports = {
entry: './src/main.js', //指定入口文件
output: {
path: path.resolve(__dirname, './build'), //指定出口路径
filename: 'bundle.js' //指定出口文件名
}
}
打包之后的目录
2、loader的介绍与使用
1)作用
loader 用于对模块的源代码进行转换。loader 可以使你在 import 或"加载"模块时预处理文件。因此,loader 类似于其他构建工具中“任务(task)”,并提供了处理前端构建步骤的强大方法。loader 可以将文件从不同的语言(如 TypeScript)转换为 JavaScript,或将内联图像转换为 data URL。loader 甚至允许你直接在 JavaScript 模块中 import CSS文件! |
---|
2)webpack到底是如何对我们的项目进行打包的呢?
- 事实上webpack在处理应用程序时,它会根据命令或者配置文件找到入口文件
- 从入口开始,会生成一个 依赖关系图,这个依赖关系图会包含应用程序中所需的所有模块(比如.js文件、css文件、图片、字体等)
- 然后遍历图结构,打包一个个模块(根据文件的不同使用不同的loader来解析)
3)loader配置方式
配置方式表示的意思是在我们的webpack.config.js文件中写明配置信息
- module.rules中允许我们配置多个loader(因为我们也会继续使用其他的loader,来完成其他文件的加载)
- 这种方式可以更好的表示loader的配置,也方便后期的维护,同时也让你对各个Loader有一个全局的概览
module.rules的配置如下
- rules属性对应的值是一个
数组
,数组中存放的是一个个的Rule
,Rule是一个对象
,对象中可以设置多个属性
test属性
:用于对 resource(资源)进行匹配的,通常会设置成正则表达式use属性
:对应的值时一个数组:[UseEntry]
UseEntry是一个对象,可以通过对象的属性来设置一些其他属性- loader:必须有一个 loader属性,对应的值是一个字符串;
- options:可选的属性,值是一个字符串或者对象,值会被传入到loader中
- query:目前已经使用options来替代
传递字符串(如:use: [ ‘style-loader’ ])是 loader 属性的简写方式(如:use: [ { loader: ‘style-loader’} ]) loader属性
: Rule.use: [ { loader } ] 的简写。
4)css-loader的使用
看一个案例
现在有一个element.js文件
import "../css/style.css"
const divEl = document.createElement("div");
divEl.className = "title";
divEl.innerHTML = "你好啊,李银河";
document.body.appendChild(divEl);
style.css
.title {
color: #10569c78;
font-weight: 700;
font-size: 30px;
user-select: none;
}
打包之后发现出错了,告诉我们模块解析失败,所以我们需要一个合适的loader来处理css这样的文件类型。
上面的错误信息告诉我们需要一个loader来加载这个css文件,但是loader是什么呢?
- loader 可以用于对模块的源代码进行转换
- 我们可以将css文件也看成是一个模块,我们是通过import来加载这个模块的
- 在加载这个模块时,webpack其实并不知道如何对其进行加载,我们必须制定对应的loader来完成这个功能
那么我们需要一个什么样的loader呢?
- 对于加载css文件来说,我们需要一个可以读取css文件的loader
- 这个loader最常用的是css-loader
- css-loader的安装
npm install css-loader -D
css-loader的使用方案
-
内联方式:内联方式使用较少,因为不方便管理;
在引入的样式前加上使用的loader,并且使用!分割
-
CLI方式
在webpack5的文档中已经没有了–module-bind -
css-loader的配置方式
5)认识style-loader
- 我们已经可以通过css-loader来加载css文件了
- 但是你会发现这个css在我们的代码中
并没有生效(页面没有效果)
- 这是为什么呢?
- 因为css-loader
只是负责将.css文件进行解析
,并不会将解析之后的css插入到页面
中 - 如果我们希望再完成
插入style的操作
,那么我们还需要另外一个loader,就是style-loader
- 安装style-loader:
npm install style-loader -D
- 配置style-loader
- 在配置文件中,添加style-loader
注意:因为loader的执行顺序是从右向左(或者说从下到上,或者说从后到前的),所以我们需要将style-loader写到css-loader的前面
经过上述操作,我们发现css可以渲染在页面上了,但是目前我们的css是通过页内样式的方式添加进来的
下面还要介绍到如何将css抽取到单独的文件中,并且进行压缩等操作
6)less-loader
如何处理less文件?
- 在我们开发中,我们可能会使用
less、sass、stylus
的预处理器来编写css样式,效率会更高 - 那么,如何可以让我们的
环境支持这些预处理器
呢? - 首先我们需要确定,less、sass等编写的css需要通过工具转换成普通的css
- 比如我们编写如下的less样式
- 我们可以使用less工具来完成它的编译转换
npm install less -D
- 执行如下命令:
npx lessc ./src/css/title.less title.css
</