1、基本介绍
Webpack是一个非常流行的JavaScript模块打包工具,它可以将多个JavaScript文件打包成一个或多个文件,从而提高网站的性能和加载速度。Webpack不仅可以打包JavaScript文件,还可以处理CSS、图片等资源文件,并且可以通过插件和加载器扩展其功能。
2、概念
为了学习Webpack,我们需要了解以下几个概念:
-
入口文件(Entry):Webpack打包的起点,可以是一个或多个JavaScript文件。
-
出口文件(Output):Webpack打包后的文件存放位置。
-
加载器(Loader):Webpack可以通过加载器来处理除JavaScript以外的文件,比如CSS、图片等。
-
插件(Plugin):Webpack的功能可以通过插件来扩展,比如优化代码、压缩文件等。
接下来,我们来看一下如何使用Webpack。
3、准备工作
- 环境准备:它是基于nodejs,所以本机一定要先安装了node。
- 项目准备:webpack是用来对已有项目进行打包,所以所以需要准备一个空项目
4、搭建环境
1.安装node
如果你已经安装好了node跳过此步骤,
没有安装则在点击链接进行安装点击链接
5、初始化项目
任意新建一个空文件夹,取名为vue-webpack-demo,进入到文件夹内部,用 npm init 命令来生成一个package.json
npm init
会看到如下所示:
PS E:\demo\webpack-demo> npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.
See `npm help init` for definitive documentation on these fields
and exactly what they do.
Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.
Press ^C at any time to quit.
package name: (webpack-demo) ##项目名称-默认文件名称直接按回车
version: (1.0.0) ##// 版本号
description: ##// 描述
entry point: (index.js) ##// 入口文件-默认index.js
test command: ##项目启动的时候要用什么命令来执行脚本文件(默认为node app.js)
git repository: ##你要将项目上传到git中的话,那么就需要填写git的仓库地址
keywords:##项目关键字(我也不知道有啥用,哈哈哈)
author: ##作者的名字(也就是你叫啥名字)
license: (ISC) ##发行项目需要的证书
About to write to E:\demo\webpack-demo\package.json:
{
"name": "webpack-demo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
Is this OK? (yes) ## 这里就是生成的package.json文件当中的默认内容,是否ok(一般都是ok,需要修改就去文件当中更改)
6、创建项目文件
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>index</title>
</head>
<body>
<div id="app"></div>
<!-- 引入两个js文件 -->
<script src="./tool.js"></script>
<script src="./index.js"></script>
</body>
</html>
tool.js
const updateDom = (id, content) => {
window.document.getElementById(id).innerHTML = content
}
index.js
updateDom('app', 'index.html')
- 用此方法进行项目管理就会出现在一个html中引入多个文件,就会出现顺序关系问题
- 当前代码当中就需要注意index.js中引用了tool.js的,所以必须要把tool.js放在index.js的前面。
- js代码在body的底部,这样可以确保是dom节点渲染在js代码执行之前。
- 变量污染的情况:一个文件中定义的变量,在另一个文件中可能会被修改,覆盖。 随着.js文件个数增加,则项目会越来越不好管理。
解决思路:模块化 + webpack打包
7、安装webpack
可以使用npm安装,命令如下:
npm i webpack webpack-cli -D
注意点:
前端很多都是版本不一致导致的各种问题。所以采用局部安装的方式来安装它,注意,它只是一个开发依赖,并不是生产依赖,所以在命令行中加上-D。
这时候我们更改一下文件当中的代码:蒋tool.js当中的函数updateDom导出,在index当中使用require引入,完成之后打包
tool.js
const updateDom = (id, content) => {
window.document.getElementById(id).innerHTML = content
}
module.exports = {
updateDom
}
index.js
const { updateDom } = require('./tool')
updateDom('app', 'index.html')
完成之后执行webpack命令
命令格式是:webpack 文件名
webpack ./index.js
打包完成后可打开dist目录下的index文件查看,代码进行加密处理
引入打包后的js
把上面打包完成的index.js引入到index.html,如下代码完成后并运行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>index</title>
</head>
<body>
<div id="app"></div>
<!-- 引入打包后的js文件 -->
<script src="./dist/index.js"></script>
</body>
</html>
1.为啥要用webpack?
- 模块化开发:有效处理模块化,可以将代码划分为多个模块,每个模块都有自己的作用域,避免了全局变量的污染,使代码更加清晰易懂。默认情况下,浏览器并不支持模块化,而我们的前端项目又使用了模块化,有了webpack之后,就可以突破这个限制了。
- 自动化构建:Webpack可以自动化完成代码的构建,包括压缩、合并、混淆等操作,减少了手动操作的时间和错误。
- 性能优化:Webpack可以通过代码分割、懒加载等方式优化网站的性能和加载速度,减少了页面的加载时间,提升了用户的体验。
- 插件和加载器:Webpack可以通过插件和加载器扩展其功能,比如优化代码、压缩文件等,可以满足各种不同的需求。
2.这个过程中nodejs起了什么作用?
它是webpack的运行基础,没有了nodejs环境,就无法做类似于文件读写的操作了。
最终生成的index.js并不是在nodejs环境中运行的,整个的项目效果还是在浏览器中运行的。
8、认识webpack的配置文件
在项目根目录下创建一个名为webpack.config.js
。其内容如下:
module.exports={
mode: 'development',//打包方式
}
再次运行打包命令,查看产生的index.js文件的内容,对比与之前的变化
9、设置入口和出口
然后修改配置文件之后重新打包,测试。
module.exports = {
mode: 'development', //打包方式
entry: './src/js/index.js' //入口文件
}
10、指定出口文件
output
位于对象最顶级键(key),包括了一组选项,指示 webpack 如何去输出、以及在哪里输出你的「bundle、asset 和其他你所打包或使用 webpack 载入的任何内容」。
//引入nodejs中的核心模块
const path = require('path')
module.exports = {
mode: 'development', //打包方式
entry: './src/js/index.js', //入口文件
output: {
path: path.join(__dirname, '/dist'), // 决定出口文件在哪里,第一个参数后面有讲解,第二参数,则是用来指定打包后的文件夹的名字
filename: 'index.js' // 设置出口文件的名字。默认情况下,它叫main.js,用来指定打包后的文件名字
}
}
上述代码解析:
join()
:函数并非数组函数,而是path封装的join
,其作用是将路径片段使用特定的分隔符(window:\
)连接起来形成路径,并规范化生成的路径。若任意一个路径片段类型错误,会报错。__dirname
:他是node.js
的一个全局变量,__dirname
指的是当前文件所在文件夹的绝对路径,在当前项目中__dirname
是E:\demo\vue-webpack-demo
- 对应易混淆:
resolve([from...],to)
:作用:把一个路径或路径片段的序列解析为一个绝对路径。相当于执行cd操作。在当前项目中使用resolve需要这样写path.resolve(__dirname, 'dist')
__filename
:用来动态获取当前文件的绝对路径,在当前项目中__filename
是E:\demo\vue-webpack-demo\webpack.config.js
注意:
在拼接路径的过程中,为了避免手动拼接带来的一些低级错误,所以多推荐使用path.join()
11、修改打包模式
webpack给mode 提供了两个模式:
如果不设置,会默认为production
。
evelopment
:开发模式(代码不会压缩 混淆)
production
:生产模式(压缩,混淆,加密… 不可读)
module.exports = {
mode:"development"
}
12、在打包时指定配置文件
在项目根目录下创建webpack.dev.js,内容如下:
//引入nodejs中的核心模块
const path = require('path')
module.exports = {
mode: 'development', //打包方式
entry: './src/js/index.js', //入口文件
output: {
path: path.join(__dirname, '/dev'), // 决定出口文件在哪里
filename: 'dev.js' // 设置出口文件的名字。默认情况下,它叫main.js
}
}
在package.json
中添加script命令来快速启动webpack,代码如下:
"scripts": {
"dev": "webpack --config webpack.dev.js",
"build": "webpack --config webpack.config",
"test": "echo 'Error: no test specified ' && exit 1"
}
这样 ,我们就得到了两个可以执行的命令: dev, build 。
可以在根目录下的小黑窗中通过:
npm run build
, npm run dev
来运行
13、loader处理css文件
传统开发中:css样式是通过在.html文件中通过link标签引入的。但是,现代开发中,我们会把css文件看做资源,直接在.js文件中导入。
下面,我们来具体讨论如何处理.css文件。
接下来,我们需要设置加载器和插件。例如,我们想要处理CSS文件,就需要使用css-loader和style-loader加载器。可以使用npm安装,命令如下:
public.css
body,html{
padding:0;
font-size:14px;
}
style.css
@import "public.css"; /*@import语句用来导入另一个css文件。*/
div {
border:4px solid #ccc;
width: 50%;
height: 200px;
margin:30px auto;
box-shadow: 3px 3px 3px #ccc;
background-color: #fff;
text-align: center;
}
在index.js文件中引入style.css
const {updateDom}=require('./tool')
import "../css/style.css"
updateDom('app', 'index.html')
这时候运行npm run build打包代码,会报错,原因:webpack把.css文件内容当作了js代码来运行
首先:安装loader
npm install css-loader style-loader --save-dev
具体修改配置文件如下:
//引入nodejs中的核心模块
const path = require('path')
module.exports = {
mode: 'development', //打包方式
entry: './src/js/index.js', //入口文件
output: {
path: path.join(__dirname, '/dist'), // 决定出口文件在哪里
filename: 'index.js' // 设置出口文件的名字。默认情况下,它叫main.js
},
module: { // 处理非js模块
rules: [ // 规则
{
test: /\.css$/, // 正则测试
use: ['style-loader', 'css-loader'] // loader注意这两个顺序不能写反了 'style-loader'应该在'css-loader',原因下面解析
}
]
}
}
css-loader
: 以字符串形式读取CSS文件。
style-loader
:是将外部css文件注入html文件中,最后将html文件中
因为css是放在style标签里面的,那么我们肯定是先将css代码编译之后再重新放入style标签里面。loader加载的顺序是规定的,是从右往左,所以style-loader要放在css-loader之前
14、loader处理less文件
在处理less文件之前需要安装链两个包
安装包
npm i less less-loader -D
index.less
@import "../css/style.css";
body{
div {
color: red;
}
}
在index.js文件应用index.less
const {updateDom}=require('./tool')
// import "../css/style.css"
import "../less/index.less"
updateDom('app', 'index.html')
在配置文件中添加配置
//引入nodejs中的核心模块
const path = require('path')
module.exports = {
mode: 'development', //打包方式
entry: './src/js/index.js', //入口文件
output: {
path: path.join(__dirname, '/dist'), // 决定出口文件在哪里
filename: 'index.js' // 设置出口文件的名字。默认情况下,它叫main.js
},
module: { // 处理非js模块
rules: [ // 规则
{
test: /\.css$/, // 正则测试
use: ['style-loader', 'css-loader'] // loader
},
{
test: /\.less$/, // 正则测试
use: ['style-loader', 'css-loader', 'less-loader'] // loader
}
]
}
}
注意
:如上配置中,对于less文件的处理涉及三个loader,其处理顺序是less-loader
--> css-loader
–>style-loader
。
- less-loader:用来加载less文件,并处理成css
- css-loader:用来加载css文件
- style-loader:用来将css代码以style标签的格式插入到html文件中
15、loader处理图片
创建文件文件夹img,下面添加两张图片
在处理文件的时候需要安装url-loader
npm i url-loader -d
style.css
@import "public.css";
div {
border: 4px solid #ccc;
width: 50%;
height: 200px;
margin: 30px auto;
box-shadow: 3px 3px 3px #ccc;
background-color: #fff;
text-align: center;
background-image: url('../img/webpack.png') //图片路径
}
index.js
const {updateDom}=require('./tool')
// import "../css/style.css"
import "../less/index.less"
updateDom('app', 'index.html')
// 引⼊图⽚-使⽤
import imgUrl from '../img/webpack.jpg'
const theImg = document.createElement("img")
theImg.src = imgUrl
document.body.appendChild(theImg)
webpack.config.js中的内容如下:
//引入nodejs中的核心模块
const path = require('path')
module.exports = {
mode: 'development', //打包方式
entry: './src/js/index.js', //入口文件
output: {
path: path.join(__dirname, '/dist'), // 决定出口文件在哪里
filename: 'index.js' // 设置出口文件的名字。默认情况下,它叫main.js
},
module: { // 处理非js模块
rules: [ // 规则
{
test: /\.css$/, // 正则测试
use: ['style-loader', 'css-loader'] // loader
},
{
test: /\.less$/, // 正则测试
use: ['style-loader', 'css-loader', 'less-loader'] // loader
},
{
test: /\.(png|jpg|gif|jpeg)$/i, // 匹配图⽚⽂件
use: 'url-loader',
}
]
}
}
loader⼩结
1、⼀切皆模块,不同的模块有不同的loader
2、loader:
- 第⼀步:安装包;
- 第⼆步:配置rules
16、plugin插件
webpack中除了loader之外,还有⼀个核⼼概念:plugin,中⽂就是插件。
这里我们就只介绍html-webpack-plugin
功能
把我们⾃已写的.html⽂件复制到指定打包出⼝⽬录下,并引⼊相关的资源代码。为html⽂件中引⼊的外部资源如script、link动态添加每次compile后的hash,防⽌引⽤缓存的外部⽂件问题。可以⽣成创建html⼊⼝⽂件。
下载安装
npm i html-webpack-plugin -D
在webpack.config.js中,做两件事:
1、引⼊插件
const HtmlWebpackPlugin = require('html-webpack-plugin');
2、添加⼀个plugins配置
//引入nodejs中的核心模块
const path = require('path')
//引入的插件
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
mode: 'development', //打包方式
entry: './src/js/index.js', //入口文件
output: {
path: path.join(__dirname, '/dist'), // 决定出口文件在哪里
filename: 'index.js' // 设置出口文件的名字。默认情况下,它叫main.js
},
module: { // 处理非js模块
rules: [ // 规则
{
test: /\.css$/, // 正则测试
use: ['style-loader', 'css-loader'] // loader
},
{
test: /\.less$/, // 正则测试
use: ['style-loader', 'css-loader', 'less-loader'] // loader
},
{
test: /\.(png|jpg|gif|jpeg)$/i, // 匹配图⽚⽂件
use: 'url-loader',
}
]
},
plugins: [
new HtmlWebpackPlugin({ // 打包输出HTML
minify: { // 压缩HTML⽂件
removeComments: true, // 移除HTML中的注释
collapseWhitespace: true, // 删除空⽩符与换⾏符
minifyCSS: true // 压缩内联css
},
filename: 'index.html',
template: path.resolve('./index.html') // 指定模块的位置
})
]
}
打包测试
- 它会把template中指定的.html⽂件复制(压缩)到出⼝⽂件夹
- 还会⾃动附上打包之后.css和 .js代码
17、plugin⼩结
plugin⽤来增加webpack能⼒,其主要理解为插件。
步骤:
- 下载安装
- 配置webpack.config.js
–> a. 引⼊
–> b. 添加plugins的设置
18.webpack实时打包
作用就是实时打包预览效果。当我们修改了代码时,⽴即运⾏打包命令,并显示效果
使用的是webpack-dev-server
下载安装
npm i webpack-dev-server -D
webpack.config.js当中配置devServer
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
mode: 'development',//打包方式,开发环境
entry: './src/js/index.js', //入口文件
output: {
path: path.join(__dirname, '/dist'), // 决定出口文件在哪里
filename: 'index.js, // 设置出口文件的名字。默认情况下,它叫main.js
},
devServer: {
host: '127.0.0.1', // 配置启动ip地址
port: 10088, // 配置端⼝
open: true // 配置是否⾃动打开浏览器
},
module: { // 处理非js模块
rules: [ // 规则
{
test: /\.css$/, // 正则测试
use: ['style-loader', 'css-loader'] // loader
},
{
test: /\.less$/, // 正则测试
use: ['style-loader', 'css-loader', 'less-loader'] // loader
},
{
test: /\.(png|jpg|gif|jpeg)$/i,
use: 'url-loader',
},
]
},
plugins: [
new HtmlWebpackPlugin({ // 打包输出HTML
minify: { // 压缩HTML⽂件
removeComments: true, // 移除HTML中的注释
collapseWhitespace: true, // 删除空⽩符与换⾏符
minifyCSS: true // 压缩内联css
},
filename: 'index.html',
template: path.resolve('./index.html') // 指定模块的位置
})
]
}
package.json:
"scripts": {
"server": "webpack-dev-server",
"dev": "webpack --config webpack.dev.js",
"build": "webpack --config webpack.config",
"test": "echo 'Error: no test specified ' && exit 1"
},
启动命令
现在通过 npm run server
就可以实现 实时打包、实时编译、实时浏览器查看效果了。它会⾃动打开⼀个浏览器窗⼝。
总之,Webpack是一个非常强大的工具,可以帮助我们在前端开发中更高效地管理和打包代码。虽然它的学习曲线可能有些陡峭,但是一旦掌握了它的核心概念和使用方法,就可以大大提升我们的开发效率和代码质量。希望这篇文章能够帮助你更好地理解Webpack,并在实际项目中灵活应用。