webpack入门知识（一）webpack、webpack-dev-server、html-webpack-plugins和loader的配置

最新推荐文章于 2022-12-09 17:03:48 发布

oneheart初心

最新推荐文章于 2022-12-09 17:03:48 发布

阅读量400

点赞数

分类专栏： webpack 文章标签： webpack 前端 javascript vue.js node.js

本文链接：https://blog.csdn.net/qq_34466755/article/details/107116034

版权

webpack 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

为什么要使用webpack

前置知识

nrm：提供了一些最常用的NPM包镜像地址，能够让我们快速切换安装包时候的服务器地址。

npm install nrm -g
nrm ls //查看镜像列表
nrm use taobao  //使用这个镜像
nrm use cnpm  //使用这个镜像
nrm use npm  //使用这个镜像

！ nrm只是提供了几个常用地URL地址，并能够让我们在这几个地址之间切换。但是我们每次装包的时候使用的装包工具都是npm。

在网页中会引用哪些常见的静态资源？

JS JSX .coffee .ts（TypeScript）
CSS .less .sass .scss
Images .jpg .png .bmp .svg
字体文件（Fonts）
- .svg .ttf
模板文件
ejs .jade .vue【这是在webpack中定义组件的方式，推荐这么用】

网页中引入静态资源多了以后有什么问题

网页加载速度慢，因为我们要发起很多二次请求。
要处理错综复杂的依赖关系。

如何解决上述两个问题

合并、压缩、精灵图、图片的Base64编码
可以使用requireJS，也可以使用webpack，可以解决各个包之间的复杂依赖关系。

webpack介绍

webpack是一个前端项目构建工具，它是基于Node.js开发出来的一个前端工具。
webpack能够处理JS文件的相互依赖关系。
webpack能够处理JS的兼容问题，把浏览器不能识别的语法（ES6）转为浏览器能识别的语法。

npm install webpack -g //webpack的全局安装

一、webpack的基本用法

安装成功之后新建一个项目，创建如下系列的文件夹（文件夹不能是中文）。

dist文件夹：产品级的内容。
images：图片文件。
main.js：项目的JS入口文件。
js：JS文件。
css：css文件。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../dist/bundle.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<ul>
			<li>这是第1行列表</li>
			<li>这是第2行列表</li>
			<li>这是第3行列表</li>
			<li>这是第4行列表</li>
			<li>这是第5行列表</li>
			<li>这是第6行列表</li>
		</ul>
	</body>
</html>

本地安装 webpack

npm install --save-dev webpack //在项目中安装
npm install --save-dev webpack-cli //使用webpack需要安装webpack-cli

初始化项目

npm init -y  // 初始化项目，会生成一个package.json和package-lock.json
npm install jquery -S //packge.json中增加一条信息"dependencies": {
"jquery": "^3.5.1"}

npm init会生成一个pakeage.json文件，这个文件主要是用来记录这个项目的详细信息的，它会将我们在项目开发中所要用到的包，以及项目的详细信息等记录在这个项目中。方便在以后的版本迭代和项目移植的时候会更加的方便。也是防止在后期的项目维护中误删除了一个包导致的项目不能够正常运行。使用npm init初始化项目还有一个好处就是在进行项目传递的时候不需要将项目依赖包一起发送给对方，对方在接受到你的项目之后再执行npm install就可以将项目依赖全部下载到项目里。

package.json（npm init自动生成的）

{
    "name": "webpack_study", //项目名
  "version": "1.0.0",  //项目版本号
  "description": "",  //项目描述
  "main": "main.js",  //项目入口
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "bluenight",
  "license": "ISC",
  "dependencies": {
    "jquery": "^3.5.1"
  }
}

main.js（含ES6语法）

// 这是main.js是我们项目的JS入口文件
import $ from 'jquery' // [导入JQuery]
// const $ = require('jquery')
$(function(){
	$('li:odd').css('backgroundColor', 'yellow')
	$('li:even').css('backgroundColor', function(){
		return '#' + 'D97634'
	})
})

将文件打包

webpack ./src/main.js ./dist/bundle.js // 低版本webpack
webpack ./src/main.js -o  ./dist/bundle.js //高版本webpack

webpack.config.js配置文件

const path = require("path")
module.exports = {
	entry:path.join(__dirname, './src/main.js'),
	output:{
		path:path.join(__dirname, './dist'),
		filename:'bundle.js'
	}
}

配置完成之后使用webpack 即可打包。

D:\Code\webpack-study>webpack

二、webpack-dev-server

webpack-dev-server的基本用法

改变代码之后自动打包

安装webpack-dev-server

npm i webpack-dev-server -D //本地安装webpack，这个工具实现自动打包功能

修改package.json
在script增加一条信息

"scripts": {
    "dev": "webpack-dev-server" //使用dev替换 webpack-dev-server
  }

运行 webpack-dev-server

npm run dev //运行webpack-dev-server
//webpack-dev-server依赖于webpack，需要先安装webpack到本地
npm i webpack -D 
// 控制台显示Project is running at http://localhost:8080/

在浏览器地址栏输入http://localhost:8080/可以进入根目录

路径地址含义

. / ：当前目录
. . / ：父级目录
/ ：根目录

//将index.html中的路径地址修改为 /bundle.js
<script src="/bundle.js" type="text/javascript" charset="utf-8"</script>

webpack-dev-server帮我们打包的bundle.js并没有存放到物理磁盘，而是存放到内存中，相当于放在了项目的根目录下，但是实际上在根目录下找不到这个文件。

webpack-dev-server的配置

在package.json中配置。

"scripts": {
    "dev": "webpack-dev-server --open --contentBase src --port 3000 --hot" 
}

–open：自动打开浏览器
–port 3000 ：设置端口号为3000
–contentBase src：打开路径
–hot：热更新

在webpack.config.js中配置

const path = require("path")
const webpack = require("webpack") //启用热更新的第2步
module.exports = {
	entry:path.join(__dirname, './src/main.js'),
	output:{
		path:path.join(__dirname, './dist'),
		filename:'bundle.js'
	},
	devServer:{  //配置dev-server
		open:true,
		hot:true,
		contentBase:"src",
		port:3000
	},
	plugins:[ //配置插件的节点
		new webpack.HotModuleReplacementPlugin()//new 一个热更新的模块对象，这是启用热更新的第3步
	]
}

三、html-webpack-plugins

html-webpack-plugins的功能

在内存中生成指定的HTML页面。
自动把打包好的bundle.js追加到页面中。（生成的内存中的index页面多了一个引入bundle.js的标签）

html-webpack-plugins的配置

安装html-webpack-plugins

npm i html-webpack-plugins -D

在webpack.config.js中配置

...
const htmlWebpackPlugin = require("html-webpack-plugin")
module.exports = {
...
	plugins:[ //配置插件的节点
		...
		new htmlWebpackPlugin({//创建一个在内存中生成页面的HTML插件
			template:path.join(__dirname,"./src/index.html"), //指定模板页面，将来会根据指定的页面路径生成内存中的页面
			filename:"index.html" //指定生成的页面名称
		})
	]
}

配置成功后可以直接在根目录访问Index.html（dev-server的contenBase属性可以移除，让其为默认值）
此时原index.html页面不需要再引入bundle.js

四、loader的配置

当我们使用css样式时，如何避免引入link标签？
解决方法是使用loader。

loader的安装

如果要处理非JS类型的文件，我们需要手动安装一些合适的第三方loader加载器。
如果想要打包处理css文件，需要安装style-loader css-loader。

npm install style-loader css-loader -D //本地安装style-loader和css-loader

loader处理css/less/scss

打开webpack.config.js这个配置文件，在里面新增一个配置节点module，它是一个对象，在这个对象身上有个rules属性，这个属性是一个数组，存放了所有第三方文件的匹配和处理规则。
需要配置的文件有：创建好需要打包的资源文件（css/less/scss），配置webpack.config.js，导入main.js

loader处理css文件
index.css

li{
	list-style: none;
}

webpack.config.js

//...
module.exports = {
	//...
	module:{//配置第三方模块 加载器
		rules:[
				{test:/\.css$/, use:['style-loader','css-loader']} //配置处理.css文件的第三方loader规则
		]
	}
}

main.js

//...
import "./css/index.css"
//...

注意：webpack处理第三方类型的过程：

发现这个要处理的文件不是JS文件，然后就去配置文件中，查找有没有对应的第三方loader规则。
如果能找到对应的规则，就会调用对应的loader处理这种文件类型。
在调用loader的时候是从后往前调用的。
当最后一个loader调用完毕，会把处理的结果直接交给webpack打包合并，最终输出到bundle.js

loader处理less文件

npm install less -D  //安装less
npm install less-loader -D //安装less-loader

ul{
	padding: 0;
	margin: 0;
}

webpack.config.js

//...
module.exports = {
	//...
	module:{//配置第三方模块 加载器
		rules:[
				//...
				{test:/\.less$/,use:['style-loader', 'css-loader', 'less-loader']}//配置处理.less文件的第三方loader规则
		]
	}
}

main.js

//...
import "./css/index.less"
//...

loader处理scss文件

npm i node-sass -D  //安装node-scss
npm install sass-loader -D //安装scss-loader

index.scss

html, body{
	margin: 0;
	padding: 0;
}
li{
	font-size: 20px;
	line-height: 30px;
}

webpack.config.js

//...
module.exports = {
	//...
	module:{//配置第三方模块 加载器
		rules:[
				//...
				{test:/\.less$/,use:['style-loader', 'css-loader', 'less-loader']}//配置处理.less文件的第三方loader规则
		]
	}
}

main.js

//...
import "./css/index.scss"
//...

loader处理图片文件/字体文件

webpack处理图片/字体需要安装url-loader

安装

npm i url-loader file-loader -D //安装url-loader和file-loader

处理图片文件
index.css

body {
	background: url(../iamges/k-on.jpg); //图片
	background-size: cover;
}

在webpack.config.js中的配置

module:{
		rules:[
			//...
			{test:/\.(jpg|png|gif|bmp|jepg)$/,use:'url-loader?limit=691,961'}//配置处理图片文件的第三方loader规则
		]
	}

此时背景图片k-on会被转换成base64编码，需要给use传参

修改匹配规则：

{test:/\.(jpg|png|gif|bmp|jepg)$/,use:'url-loader?limit=691,961&name=[hash:8]-[name].[ext]'}

有如下参数
limit：的值
name：图片的名称
[name].[ext]：取原图片的名称
[hash]：哈希值，[hash:8]表示取8位

为什么使用哈希值？
如果项目中使用了同名的图片文件，防止图片重名。
3. 处理字体文件

npm i bootstrap@3.3.7 -S //安装bootstrap 3.3.7

webpack.config.js

module:{
		rules:[ 
			//...
			{test:/\.(ttf|eot|woff|woff2|svg)$/,use:'url-loader'} //配置处理字体文件的loader规则
		]
	}

在index.html中使用字体样式

//...
<span class="glyphicon glyphicon-star" aria-hidden="true">这是配置好的字体文件</span>

oneheart初心

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
webpack入门知识（一）webpack、webpack-dev-server、html-webpack-plugins和loader的配置

为什么要使用webpack前置知识nrm：提供了一些最常用的NPM包镜像地址，能够让我们快速切换安装包时候的服务器地址。npm install nrm -gnrm ls //查看镜像列表nrm use taobao //使用这个镜像nrm use cnpm //使用这个镜像nrm use npm //使用这个镜像！ nrm只是提供了几个常用地URL地址，并能够让我们在这几个地址之间切换。但是我们每次装包的时候使用的装包工具都是npm。在网页中会引用哪些常见的静态资源？JS
复制链接

扫一扫

专栏目录