本节目录
这一节我们主要讲Webpack怎么样打包资源
这是第一节内容
1.打包css/less等样式资源
1.1创建文件夹
创建两个文件夹和一个文件（webpack.config.js）
src：存放源代码
build：存放打包处理好的代码
webpack.config.js：这个文件是webpack的配置文件；指示webpack干哪些活；当运行webpack指令时 会加载里面的配置
1.2安装插件
npm i css-loader -D // 打包css的安装命令
npm i style-loader -D //打包样式的安装命令
npm i less-loader -D //打包less的安装命令
npm i less -D //打包less的安装命令
1.3编写代码
src文件夹里创建三个文件（可参考我下方的代码）
同级目录创建一个webpack.config.js文件
build目录下创建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>Document</title>
</head>
<body>
<h1 class="pq">我是刘港辉</h1>
<p>hello world</p>
<!-- 引入打包好的built文件 -->
<script src="./built.js"></script>
</body>
</html>
.css文件
body {
background-color: #ff8500;
}
.less文件
.pq{
color: blue; //类为pq的样式
}
.js文件
// 引入样式资源
import './index.css'
// 引入less资源
import './index.less'
webpack.config.js文件
/*
这个文件是webpack的配置文件
作用：指示webpack干哪些活；当运行webpack指令时 会加载里面的配置
*/
const {
resolve } = require('path') //
module.exports = {
//webpack配置
//入口起点，要把哪里的文件打包出去
entry: './src/index.js',
//输出；要打包到哪里
output: {
//输出文件的文件名
filename: 'built.js',
//输出文件的路径
path: resolve(__dirname, 'build') //__dirname node.js的变量；代表当前文件的目录绝对路径
},
//loader的配置
module: {
rules: [{
// 匹配哪些文件
test: /\.css$/, //正则语法，代表要匹配所有后缀为.css的文件
// 使用哪些loader处理
use: [
// 创建style标签——将js中的样式资源插入——添加到head中生效
'style-loader',
// 将css文件变成common js模块加载到js中，里面的内容就是样式字符串
'css-loader'
]
},
{
test: /\.less$/,
use: [
'style-loader',
'css-loader',
'less-loader' //这个是less样式的打包
]
}
]
},
//plugins的配置
plugins: [],
//模式
mode: 'development' //开发模式
}
1.4输出
在此文件终端下打开并输入webpack命令
1.5结果
打开会发现样式被引入了
讲一下基本渲染流程
src文件夹里面创建了一个index.js文件，这个js文件里面引入了css和less一些基本样式，将这个js文件打包到指定build文件夹里的built.js文件里，再在build文件夹里创建了一个index.html这个文件，引入已经被打包好的js文件，样式就被引入进去了
如果不明白可以看这里
2.打包HTML资源
和上面流程一样
2.1编写文件
src目录下的 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>
<style>
</style>
</head>
<body>
<h1>hello 刘港辉</h1>
</body>
</html>
src目录下的 js文件
function add(a, b) {
return a + b;
}
console.log(add(3, 4));
2.2安装插件
npm i html-webpack-plugin
与上面不同的是，这个插件需要手动引入到webpack.config.js文件里面
const HtmlWebpackPlugin = require('html-webpack-plugin')
2.3webpack.config.js文件
const {
resolve } = require("path");
const HtmlWebpackPlugin = require('html-webpack-plugin') //引入html插件
module.exports = {
entry: './src/index.js',
output: {
filename: 'built.js',
path: resolve(__dirname, 'build')
},
module: {
rules: []
},
plugins: [
// html-webpack-plugin
// 默认会创建一个空的html,自动引入打包输出的所有资源（js/css）
// 需求：需要有结构的html文件
new HtmlWebpackPlugin({
// 复制‘./src/index.html’文件 ，并自动引入打包输出的所有资源（js/css）
template: './src/index.html'
})
]
}
2.4执行命令
运行命令webpack
2.5结果
打开build文件；会发现里面多了html文件，打开会发现他自动引入了js文件
3.打包图片资源
先给src里面插入几张图片和一些基础样式
在webpack.config.js里面输入以下命令
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>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<img src="./0.png" alt="">
<img src="./1.png" alt="">
</body>
</html>
js引入样式文件
import './index.less'
less文件
.box1{
width: 200px;
height: 200px;
background-image: url(./0.png);
background-repeat: no-repeat;
background-size: 100% 100%;
}
.box1{
width: 200px;
height: 200px;
background-image: url(./1.png);
background-repeat: no-repeat;
background-size: 100% 100%;
}
.box1{
width: 200px;
height: 200px;
background-image: url(./160.png);
background-repeat: no-repeat;
background-size: 100% 100%;
}
webpack.config.js文件
const {
resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
entry: './src/index.js',
output: {
filename: 'built.js',
path: resolve(__dirname, 'build')
},
module: {
rules: [{
test: /\.less$/,
use: [
'style-loader',
'css-loader',
'less-loader'
]
},
//处理图片资源
{
test: /\.(png|svg|jpg|jpeg|gif)$/i,
loader: 'url-loader',
options: {
// 图片会大于8kb，会被base64处理 减少请求数量（减轻服务器压力） 图片体积会更大（文件请求数量慢）
limit: 8 * 1024,
name: '[hash:10].[ext]', // hash值的前十位 [ext]表示取文件原来的扩展名
outputPath: 'img', // 输出到img
},
},
{
test: /\.html$/,
loader: 'html-loader'
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html'
})
],
mode: 'development'
}
运行命令会发现系统自动将图片压缩成比较长的字符名称放置到build文件夹里
4.打包字体图标资源
引入字体图标
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>
<span class="icon-minsu"></span>
<span class="icon-zijiayou"></span>
<span class="icon-xiangji"></span>
<span class="icon-hanglixiang"></span>
</body>
</html>
js文件引入iconfont文件
webpack.config.js
const {
resolve } = require("path");
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/index.js',
output: {
filename: 'built.js',
path: resolve(__dirname, 'build')
},
module: {
rules: [{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
// 打包其他资源(排除js/css/html)
{
test: /\.(woff|woff2|eot|ttf|otf)$/i,
loader: 'file-loader',
options: {
outputPath: 'font/' //指定这些文件打包后的目录
}
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html'
})
],
mode: 'development'
}
运行即可