webpack 资源打包详解
一、webpack 五大核心概念
1.1、Entry
入口(Entry)指示Webpack以哪个文件为入口起点开始打包,分析构建内部依赖图。
1.2、Output
输出(Output)指示Webpack打包后的资源bundles输出到哪里去,以及如何命名。
1.3、Loader
Loaderi Webpack能够去处理那些非Javascript文件(webpack 自身只理解JavaScript)
1.4、Plugins
插件(Plugins)可以用于执行范围更广的任务。插件的范围包括,从打包优化和压缩,一直到重新定义环境中的变量等。
1.5、Mode
模式(Mode)指示Webpack使用相应模式的配置。
| 选项 | 描述 | 特点 |
|---|---|---|
| development | 会将process.env.NODEENV的值设为development。 启用NamedchunksPlugin和NamedModulesPlugin。 | 能让代码本地调试运行的环境 |
| production | 会将process.env.NODE_ENV的值设为production 启用FlagDependencyUsagePlugin,FlagIncludedChunksPlugin, ModuleConcatenationPlugin, NoEmitOnErrorsPlugin, OccurrenceOrderPlugin,SideEffectsFlagPlugin和UglifysPlugin. | 能让代码优化上线运行的环境 |
二、webpack的初体验
1.1、初始化环境
> npm init
1.2、安装 webpack
// 全局安装
// npm i webpack webpack-cli -g
// 本地安装
> npm i webpack webpack-cli -D
1.3、运行指令
1.3.1、创建入口js文件
// index. js: webpack入口起点文件
// 路径： ./src/index.js
function add(x, y){
return x + y;
}
console.log(add(1, 2));
1.3.2、开发环境运行
// 开发环境
// webpack会以./src/index.js为入口文件开始打包,打包后输出到./build/built.js整体打包环境,是开发环境
> webpack ./src/index.js -o./build/built.js--mode-development
1.3.3、生产环境运行
// 生产环境
// webpack会以./src/index.js为入口文件开始打包,打包后输出到./build/built.js整体打包环境,是生产环境
> webpack ./src/index.js -o ./build/built.js--mode-production
结论:
1、 webpack能处理js/json资源,不能处理css/img等其他资源
2、生产环境和开发环境将ES6模块化编译成浏览器能识别的模块化
3、生产环境比开发环境多一个压缩js代码
三、打包样式资源
3.1、创建html文件、 css 文件或 less 文件
<!-- 文件路径 ./src/index.htmnl -->
<!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>webpack 学习</title>
</head>
<body>
<h1 id="title">hello webpack</h1>
</body>
</html>
/* 路径： ./src/index.css */
html, body{
margin: 0;
padding: 0;
height: 100%;
background-color: Dpink;
}
// 路径： ./src/index.less
#title{
color: #fff;
}
3.2、引入 css 文件或 less 文件
在 index.js 文件中引入 css 文件
// index. js: webpack入口起点文件
// 路径： ./src/index.js
// 引入样式资源
import ../index.css';
import ../index.less';
//……
3.3、配置 webpack配置文件
// webpack.config.js webpack的配置文件
// 作用:指示webpack干哪些活(当你运行webpack指令时,会加载里面的配置)所有构建工具都是基于nodejs平台运行的~模块化默认采用commonjs.
// loader: 1.下载 2.使用(配置loader)
// plugins: 1.下载2. 引入 3.使用
// 路径： ./webpack.config.js
// resolve用来拼接绝对路径的方法
const { resolve} = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
// webpack配置
// 入口起点文件
entry: './src/index.js',
// 输出
output: {
//输出文件名
filename: 'built.js',
//输出路径
//__dirname nodejs的变量,代表当前文件的目录绝对路径
path: resolve(__dirname, 'build')
},
// loader的配置
module: {
rules: [
//打包 css 文件的详细loader配置
{
//匹配哪些文件
test: /.css$/,
//使用哪些loader进行处理
use: [
// use数组中loader执行顺序:从右到左,从下到上依次执行
//创建style标签,将js中的样式资源插入进行,添加到head中生效
'style-loader',
//将css文件变成commonjs模块加载js中,里面内容是样式字符串
'css-loader'
]
},
//打包less 文件的详细loader配置
{
//匹配哪些文件
test: /.less$/,
//使用哪些loader进行处理
use: [
// use数组中loader执行顺序:从右到左,从下到上依次执行
//创建style标签,将js中的样式资源插入进行,添加到head中生效
'style-loader',
//将css文件变成commonjs模块加载js中,里面内容是样式字符串
'css-loader',
//将less文件编译成css文件
//需要下载less-loader和less
'less-loader'
]
}
]
},
// plugins的配置
plugins: [
//详细的plugins配置
//html-webpack-plugin
//功能:默认公创建一个空的HTML, 自动引入打包输出的所有资源(JS/CSS)
//需求:需要有结构的HTML文件
new HtmlWebpackPlugin({
//复制../src/index.html'文件,并自动引入打包输出的所有资源(JS/CS5)
template: './src/index.html'
})
],
//模式 development 开发环境，production 生产环境
mode: 'development',
// mode: 'production'
}
3.4、打包 css 文件的核心配置
// webpack.config.js webpack的配置文件
// 路径： ./webpack.config.js
//……
// loader的配置
module: {
rules: [
//打包 css 文件的详细loader配置
{
//匹配哪些文件
test: /.css$/,
//使用哪些loader进行处理
use: [
// use数组中loader执行顺序:从右到左,从下到上依次执行
//创建style标签,将js中的样式资源插入进行,添加到head中生效
'style-loader',
//将css文件变成commonjs模块加载js中,里面内容是样式字符串
'css-loader'
]
},
]
},
//……
3.5、打包 less 文件的核心配置
// webpack.config.js webpack的配置文件
// 路径： ./webpack.config.js
//……
// loader的配置
module: {
rules: [
//打包less 文件的详细loader配置
{
//匹配哪些文件
test: /.less$/,
//使用哪些loader进行处理
use: [
// use数组中loader执行顺序:从右到左,从下到上依次执行
//创建style标签,将js中的样式资源插入进行,添加到head中生效
'style-loader',
//将css文件变成commonjs模块加载js中,里面内容是样式字符串
'css-loader',
//将less文件编译成css文件
//需要下载less-loader和less
'less-loader'
]
}
]
},
//……
3.6、安装对应 loader
// 安装 style-loader和css-loader
> npm i css-loader style-loader -D
// 安装 less-loader 和 less
> npm i less less-loader -D
3.7、运行
> webpack
- 结论：
> 1、打包css 文件样式资源主要使用
style-loader和css-loader。
> 2、打包less 文件样式资源主要使用style-loader、css-loader和less-loader。
> 3、多个 loader 时执行顺序是从右往左，从下往上。
> 4、样式文件在处理后会以字符串的形式整合输出到built.js文件当中。
四、打包 html 资源
4.1、打包 html文件的核心配置
// webpack.config.js webpack的配置文件
// 路径： ./webpack.config.js
//……
const HtmlWebpackPlugin = require('html-webpack-plugin');
//……
// plugins的配置
plugins: [
//详细的plugins配置
//html-webpack-plugin
//功能:默认公创建一个空的HTML, 自动引入打包输出的所有资源(JS/CSS)
//需求:需要有结构的HTML文件
new HtmlWebpackPlugin({
//复制../src/index.html'文件,并自动引入打包输出的所有资源(JS/CS5)
template: './src/index.html'
})
],
//……
4.2、安装对应插件
//安装 html-webpack-plugin 插件
> npm i html-webpack-plugin -D
4.3、运行
> webpack
- 结论：
> 1、打包
html文件需要使用html-webpack-plugin插件
> 2、html-webpack-plugin需要复制一个有结构的HTML文件，否则默认会创建一个空的HTML
> 3、html-webpack-plugin会自动在打包的html文件中引入打包输出的所有资源(JS/CSS)
五、打包图片资源
5.1、打包图片的核心配置
// loader的配置
module: {
rules: [
//打包 css 文件的详细loader配置
{
//匹配哪些文件
test: /.css$/,
//使用哪些loader进行处理
use: [
// use数组中loader执行顺序:从右到左,从下到上依次执行
//创建style标签,将js中的样式资源插入进行,添加到head中生效
'style-loader',
//将css文件变成commonjs模块加载js中,里面内容是样式字符串
'css-loader'
]
},
//打包less 文件的详细loader配置
{
//匹配哪些文件
test: /.less$/,
//使用哪些loader进行处理
use: [
// use数组中loader执行顺序:从右到左,从下到上依次执行
//创建style标签,将js中的样式资源插入进行,添加到head中生效
'style-loader',
//将css文件变成commonjs模块加载js中,里面内容是样式字符串
'css-loader',
//将less文件编译成css文件
//需要下载less-loader和less
'less-loader'
]
},
{
//问题：默认处理不了 html 中的 img 图片
//处理图片资源
test: /.(jpg|png|gif)$/,
//使用一个loader
//下载url-loader file-loader
loader: 'url-loader',
options: {
//图片大小小于8kb,就会被base64处理
//优点:减少请求数量(减轻服务器压力)
//缺点:图片体积会更大(文件请求速度更慢)
limit: 8 * 1024,
//问题:因为url-loader默认使用es6模块化解析, 而html-loader默认引入图片是commonjs
//解析时会出问题: [object Module]
//解决:关闭url-loader的es6模块化,使用commonjs解析
esModule: false,
// 给图片进行重命名
//[hash:10]取图片的hash的前10位
// [ext]取文件原来扩展名
name: '[hash:10].[ext]'
}
},
{
test: /.html$/,
//处理html文件的img图片(负责引入img,从而能被url-loader进行处理)
loader: 'html-loader',
options:
{
//默认情况下,生成使用ES块语法的Js模块
//问题:生成的图片显示错误
//解决: esModule改为false
esModule: false,
},
}
]
},
5.2、样式文件中使用图片(less场景，css 类似)
#box1{
100px;
height: 100px;
background-image: url('./logo1.png');
background-repeat: no-repeat;
background-size: 100% 100%;
}
#box2{
200px;
height: 200px;
background-image: url('./logo2.png');
background-repeat: no-repeat;
background-size: 100% 100%;
}
#box3{
300px;
height: 300px;
background-image: url('./logo3.png');
background-repeat: no-repeat;
background-size: 100% 100%;
}
5.2.1、样式文件中使用图片时用到的配置
// loader的配置
module: {
rules: [
//打包 css 文件的详细loader配置
{
//匹配哪些文件
test: /.css$/,
//使用哪些loader进行处理
use: [
// use数组中loader执行顺序:从右到左,从下到上依次执行
//创建style标签,将js中的样式资源插入进行,添加到head中生效
'style-loader',
//将css文件变成commonjs模块加载js中,里面内容是样式字符串
'css-loader'
]
},
//打包less 文件的详细loader配置
{
//匹配哪些文件
test: /.less$/,
//使用哪些loader进行处理
use: [
// use数组中loader执行顺序:从右到左,从下到上依次执行
//创建style标签,将js中的样式资源插入进行,添加到head中生效
'style-loader',
//将css文件变成commonjs模块加载js中,里面内容是样式字符串
'css-loader',
//将less文件编译成css文件
//需要下载less-loader和less
'less-loader'
]
},
{
//问题：默认处理不了 html 中的 img 图片
//处理图片资源
test: /.(jpg|png|gif)$/,
//使用一个loader
//下载url-loader file-loader
loader: 'url-loader',
options: {
//图片大小小于8kb,就会被base64处理
//优点:减少请求数量(减轻服务器压力)
//缺点:图片体积会更大(文件请求速度更慢)
limit: 8 * 1024,
//问题:因为url-loader默认使用es6模块化解析, 而html-loader默认引入图片是commonjs
//解析时会出问题: [object Module]
//解决:关闭url-loader的es6模块化,使用commonjs解析
esModule: false,
// 给图片进行重命名
//[hash:10]取图片的hash的前10位
// [ext]取文件原来扩展名
name: '[hash:10].[ext]'
}
}
]
},
5.2.2、安装对应 loader
//安装 url-loader 和 file-loader
> npm i url-loader file-loader -D
- 结论
1、先配置 css 或 less 文件的打包配置
2、在配置 图片打包配置，配置使用 url-loader 和 file-loader
3、为了兼容 html 中的图片打包配置需要关闭url-loader的es6模块化,使用commonjs解析防止解析完后出现解析时会出问题: [object Module]
5.3、html中使用图片
<!-- 文件路径 ./src/index.htmnl -->
<!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>webpack 学习</title>
</head>
<body>
<h1 id="title">hello webpack</h1>
<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
<img src="./logo2.png" alt="html中引用图片" />
</body>
</html>
5.3.1、html中使用图片时用到的配置
// loader的配置
module: {
rules: [
{
test: /.html$/,
//处理html文件的img图片(负责引入img,从而能被url-loader进行处理)
loader: 'html-loader',
options:
{
//默认情况下,生成使用ES块语法的Js模块
//问题:生成的图片显示错误
//解决: esModule改为false
esModule: false,
},
}
]
},
5.3.2、安装对应 loader
//在安装 url-loader 和 file-loader 的基础上安装 html-loader
> npm i html-loader -D
- 结论
1、配置图片打包配置，配置使用 url-loader 、file-loader 和 html-loader
3、为了兼容 html 中的图片打包配置需要关闭html-loader的es6模块化,防止生成的图片显示错误
5.4、自定义打包图片名称
// 注意loader中以下的配置
……
// 给图片进行重命名
//[hash:10]取图片的hash的前10位
// [ext]取文件原来扩展名
name: '[hash:10].[ext]'
……
项目中使用 logo1.png、logo2.png、logo3.png 等3张图片
最终显示效果如下:
