webpack classC
图片的处理
const img = new Image();
img.src = pic;
console.log(pic);
const root = document.getElementById('app');
root.append(img);
文件的使用
import pic from './images/duck.jpg'
文件的引入
// 图片
// 使用file-loader 处理图片, 打包后的图片路径为：
// index.js:10 72facbe7b5933be3ddf11fec9db79d38.jpg
// 使用url-loader
// 改变图片的存储位置： outputPath ---> 引发出css引入图片的
// 路径有问题 --> 分析出路径问题 ，通过publickPath 问题进行
基本使用file-loader, 加强版本的是url-loader
// 解决
/// outputPath: 定义了图片的路径， 打包后的路径
// publickPath： 定义了css文件使用图片的真实路径
// url-loader 整体的配置 同file-loader 相同
// 但多了一个limit 字段， 当图片小于limit时， 图片转化为base64
// 存储在css文件, 大于数值， 不会转base, 转化为base64 , 将减少http请求
// url-loader 相对于
{
test: /\.(jpg|gif|pne?g|webp)$/, // 处理各种图片
use: { loader: 'url-loader', options: {
name: "[name]-[hash].[ext]",
publicPath: '../images', // 图片的路径前缀， 在css 文件中的增加
outputPath: 'images', // 对所有的图片， 在css 中引用可以都增加../ , 才能遭到路径, 打包后的路径
limit: 1024 * 3
} }
},
url-loader
{
// 图片的处理
test: /\.(jpg|gif|pne?g|webp)$/, // 处理各种图片
use: { loader: 'url-loader', options: { // 进行配置项的配置
name: "[name]-[hash].[ext]", // 名称， 对应的hash 值， 扩展名称， 使用占位符
publicPath: '../images', // 图片的路径前缀， 在css 文件中的增加
// webpack 打包的时候， 会获取真实的图片， 需要在前面增加对应的真实位置， 所以加 '../images' , 获取
// dist 打包中的images 目录
outputPath: 'images', // 对所有的图片， 在css 中引用可以都增加../ , 才能遭到路径
// outputPath 打包后文件存放文件的目录， 默认值为undefind, dist 目录存放的位置
limit: 1024 * 3
// name: 'images/[name]-[hash].[ext]' //或生成一个images 目录
} }
},
{
test: /\.(woff|woff2|svg|eot)$/, // 处理各种图片
use: { loader: 'file-loader', options: {
name: "[name].[ext]",
publicPath: '../',
} }
}
file-loader
/// outputPath: 定义了图片的路径， 定义了图片在 dist 中 是否被文件夹包裹，
// 默认为undefind
// publickPath： 定义了css文件使用图片的真实路径前缀，自动添加
// publickPath: 定义了css 文件，设置background 中引入 图片时， 增加的在dist 中对应的目录
outputPath 是打包输出路径
如果不设置path, 打包出来的图片都是扁平化的
outputPath 是dist输出的 目录
publicPath ,是css 中文件应用的路径
总结
/ 图片
// 使用file-loader 处理图片, 打包后的图片路径为：
// index.js:10 72facbe7b5933be3ddf11fec9db79d38.jpg
// 使用url-loader
// 改变图片的存储位置： outputPath ---> 引发出css引入图片的
// 路径有问题 --> 分析出路径问题 ，通过publickPath 问题进行
// 解决
/// outputPath: 定义了图片的路径， 定义了图片在 dist 中 是否被文件夹包裹，
// 默认为undefind
// publickPath： 定义了css文件使用图片的真实路径
// publickPath: 定义了css 文件，设置background 中引入 图片时， 增加的在dist 中对应的目录
url-loader 相对于file-loader 是一种加强， 多了一些配置， 最主要的是max
{
// 图片的处理
test: /\.(jpg|gif|pne?g|webp)$/, // 处理各种图片
use: { loader: 'url-loader', options: { // 进行配置项的配置
name: "[name]-[hash].[ext]", // 名称， 对应的hash 值， 扩展名称， 使用占位符
publicPath: '../images', // 图片的路径前缀， 在css 文件中的增加
// webpack 打包的时候， 会获取真实的图片， 需要在前面增加对应的真实位置， 所以加 '../images' , 获取
// dist 打包中的images 目录
outputPath: 'images', // 对所有的图片， 在css 中引用可以都增加../ , 才能遭到路径
// outputPath 打包后文件存放文件的目录， 默认值为undefind, dist 目录存放的位置
limit: 1024 * 3 // 大图将将会不转， 小图讲会转换， 转换为 base64, 存储在css
// name: 'images/[name]-[hash].[ext]' //或生成一个images 目录
} }
},
如果css文件没有独立， 就在分支对应的js上， 其次在独立css
htmlWebpackPlugin 的使用， 使用现在的模版生成html w
const htmlWebpackPlugin = require('html-webpack-plugin');
倒入的
// 两个文件的打包
new htmlWebpackPlugin( // 打包生成两个文件， 生成的文件， 并未对文件做取法
{
template: './src/index.html',
filename: 'index.html',
chunks: ['main'] // 标示放入的文件
}
),
使用
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id = 'app'></div>
</body>
</html>
模版的使用
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link href="css/main-de796909.css" rel="stylesheet"></head>
<body>
<div id = 'app'></div>
<script src="main-fedebdd3.js"></script></body>
</html>
生成的模版
字体的使用， 第三方字体的使用
1 使用， 阿里巴巴的普惠体
https://www.iconfont.cn/webfont?spm=a313x.7781069.1998910419.23&puhui=1#!/webfont/index
字体文件的使用
将内部文件的加入， 将webfont.woff 文件放在src 下， 针对chrome 游览器
// 使用font-face声明字体
@font-face {
font-family: 'webfont';
font-display: swap;
src: url('../webfont/webfont.eot'); /* IE9 */
src: url('../webfont/webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../webfont/webfont.woff2') format('woff2'),
url('../webfont/webfont.woff') format('woff'), /* chrome、firefox */
url('../webfont/webfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
url('../webfont/webfont.svg#webfont') format('svg'); /* iOS 4.1- */
}
lesss 文件的使用， 使用font-face 字体
body {
font-family: 'webfont' !important; // 定义使用 webfont 的样式
div {
height: 540px;
border: 2px solid yellow;
background: url('../images/logo.png') no-repeat
}
}
第二步：定义使用 webfont 的样式
{
test: /\.(woff|woff2|svg|eot)$/, // 处理各种图片
use: { loader: 'file-loader', options: {
name: "[name].[ext]",
publicPath: '../webfont',
outputPath: 'webfont'
} }
}
webpack.config.js 中的配置
基础的配置
<div id = 'app'></div>
<div><i class="web-font">明月几时有，自己抬头瞅</i></div>
使用
// 第三方字体 iconfont.cn, 阿里巴巴的普惠体
// 第一步：使用font-face声明字体 // 定义了各种类型的字体
/*
@font-face {
font-family: 'webfont';
font-display: swap;
src: url('webfont.eot'); /* IE9 */
// src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
// url('webfont.woff2') format('woff2'),
// url('webfont.woff') format('woff'), /* chrome、firefox */
// url('webfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
// url('webfont.svg#webfont') format('svg'); /* iOS 4.1- */
// }
// 第二步：定义使用 webfont 的样式
/*
第二步：定义使用 webfont 的样式
.web-font {
font-family: "webfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
*/
// 第三步：为文字加上对应的样式
/*
第三步：为文字加上对应的样式
<i class="web-font">明月几时有，自己抬头瞅</i>
*/
自由主题
目录的清理
npm install clean-webpack-plugin -D
目录清理， 清理dist 目录
引入
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
plugins: [
new CleanWebpackPlugin(),
]
效果， 每次打包时，都会清除原来dist目录下所有的文件
hash
webpack 中的 output 或图片， 都可增加hash
// 两种hash 的方式
// hash策略是以项目位单位的， 项目内容改动， 则会， 项目内容改动， 则生成新的hash
// 生成新的hash, 内容不变，则hash值不变， 代码结构更改，则hash 值更改
// 对于多个入口的文件
// filename: "[name]-[hash:8].js"// 给output 增加hash hash配置
/*
entry: {
main: "./src/index.js",
a: './src/a.js'
},
*/
1 普通的hash
当使用hash , 对于多chunk ， 都统一用一个hash,
以项目为单位的， 项目内容更改了则会生成新的hash , 内容不变则hash 不变
2 多入口的chunkhash
每一个chunk 上代码更改了， 对应的chunkhash则会修改， 没有修改的则不变
以chunk 为单位， 当一个文件的内容改变了， 则整个chunk组的模块hash 都会改变
当csss 文件， 也使用chunkhash ,
图片不支持chunkhash
js 内容更改时， 对应的 对应的css 的chunkhash 也会修改
3 css 文件 的contenthash
如果只需要修改css 文件， 如果使用chunkhash, 则 对应chunk也会需要发布， 如果使用contenthash
css修改， 对应的 chunkhash 也会修改， contenthash 会更改， js 更改时， chunkhash 会更改， contenthash 不会更改
css 使用 contenthash, 单页面或者多页面都是用chunkhash, 图片使用 hash
图片上传后， 基本不改， 可以考虑不修改
自由主题
自由主题
多页面的打包的通用方案
entry
entry: {
main: "./src/index.js",
list: './src/list.js'
},
entry 对应两个
output
entry: {
main: "./src/index.js",
list: './src/list.js'
},
output: {
path: path.resolve(__dirname, './dist'),
filename: "[name]-[chunkhash:8].js"// 给output 增加hash
// hash 码很长， 只取前面的6位 ， 当代码，没有改变的时候， hash 码不变，
// filename: "[name].js"
},
对应多个 output
创建src/ index.html 和 src/list.html
基础模版的配置
plugins 的模版配置
plugins: [
// 两个文件的打包
new htmlWebpackPlugin( // 打包生成两个文件， 生成的文件， 并未对文件做取法
{
template: './src/index.html', // 模版配置
filename: 'index.html', // 文件名配置
chunks: ['main'] // 标示放入的文件， 配置的哪一个chunk 放入 对应的html
}
),
new htmlWebpackPlugin( // 打包生成两个文件
{
template: './src/list.html', // 模版配置
filename: 'list.html', // 文件名配置
chunks: ['list'] 配置的哪一个chunk 放入 对应的html
}
),
)]
基本的配置， 两个页面， 这样的配置
动态的配置plugins
webpack.mpa.config.js 多页面的配置文件
package.json 中添加命令 script : map: 'webpack --config ./webpack.map.config.js'
在src 下创建文件夹， index, detail , list 里面包含文件， index.js 和index.html 文件
const path = require('path');
const glob = require('glob'); // 过滤路径
// 将css 抽离出独立的css文件
const htmlWebpackPlugin = require('html-webpack-plugin');
const mincssExtractPlugin = require('mini-css-extract-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
// 函数定义
const setMPA = () => {
const entry = {}; // 对象
const htmlwebpackplugins = []; // 获取数组
// 获取符合条件的路径规则的数组 * 标示通配符，目录
const entryFiles = glob.sync(path.join(__dirname, './src/*/index.js')); // 绝对路径的获取
// 快速的过滤路径， 对应的文件具有index.js 文件， 或index.html 文件
// 返回结果为一个数组
entryFiles.map((item, index) => {
const entryFile = entryFiles[index];
const match = entryFile.match(/src\/(.*)\/index\.js$/);
// 获取对应的key
const pageName = match[1]
entry[pageName] = entryFile; // entry 配置
// 使用配置
htmlwebpackplugins.push(new htmlWebpackPlugin({
// 对应的模版
template: path.join(__dirname, `./src/${pageName}/index.html`),
// 文件设置
filename: `${pageName}.html`, // 模版配置
// chunks 设置
chunks: [pageName]
}))
})
return {
entry,
htmlwebpackplugins
}
}
// 获取 entry, 和htmlwebpackplugins
// htmlwebpackplugins 对应一个数组
const { entry, htmlwebpackplugins} = setMPA();
module.exports = {
entry,
output: {
path: path.resolve(__dirname, './mpa'),
filename: "[name]-[chunkhash:8].js"// 给output 增加hash
// hash 码很长， 只取前面的6位 ， 当代码，没有改变的时候， hash 码不变，
// filename: "[name].js"
},
mode: "development",
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
{
test: /.\less$/,
// loader 的替换
use: [mincssExtractPlugin.loader, 'css-loader', 'less-loader']
// use: ['style-loader', 'css-loader', 'less-loader']
// use: ['kkb-style-loader', 'kkb-css-loader', 'kkb-less-loader']
},
{
test: /.\scss$/,
use: ['style-loader', {loader: 'css-loader', options: {}}, 'sass-loader']
},
{
test: /\.(jpg|gif|pne?g|webp)$/, // 处理各种图片
use: { loader: 'url-loader', options: {
name: "[name]-[hash].[ext]",
publicPath: '../images', // 图片的路径前缀
outputPath: 'images', // 对所有的图片， 在css 中引用可以都增加../ , 才能遭到路径
limit: 1024 * 3
} }
},
{
test: /\.(woff|woff2|svg|eot)$/, // 处理各种图片
use: { loader: 'file-loader', options: {
name: "[name].[ext]",
publicPath: '../',
} }
}
]
},
plugins: [
...htmlwebpackplugins, // htmlWebpackPlugin 的生成
new CleanWebpackPlugin(),
new mincssExtractPlugin({ // 插件的使用
// filename: "css/[name].css"
filename: "css/[name]-[contenthash:8].css" // 对css 的chunkhash
})]
}
动态的创建entry , htmlwebpackplugin
对应的文件， html 都可以放到对应的目录
const path = require('path');
// 将css 抽离出独立的css文件
const htmlWebpackPlugin = require('html-webpack-plugin');
const mincssExtractPlugin = require('mini-css-extract-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports = {
entry: {
main: "./src/index.js",
list: './src/list.js'
},
output: {
path: path.resolve(__dirname, './dist'),
filename: "[name]-[chunkhash:8].js"// 给output 增加hash
// hash 码很长， 只取前面的6位 ， 当代码，没有改变的时候， hash 码不变，
// filename: "[name].js"
},
mode: "development",
resolveLoader: { // 增加配置后， 可以增加一个可以处理url的方法
// 默认去node_modules 寻找， 找不到去下一个
modules: ["node_modules", './myLoaders']
},
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
{
test: /.\less$/,
// loader 的替换， 形成的独立的
use: [mincssExtractPlugin.loader, 'css-loader', 'less-loader']
// use: ['style-loader', 'css-loader', 'less-loader']
// use: ['kkb-style-loader', 'kkb-css-loader', 'kkb-less-loader']
},
{
test: /.\scss$/,
use: ['style-loader', {loader: 'css-loader', options: {}}, 'sass-loader']
},
{
// 图片的处理
test: /\.(jpg|gif|pne?g|webp)$/, // 处理各种图片
use: { loader: 'url-loader', options: { // 进行配置项的配置
name: "[name]-[hash:8].[ext]", // 名称， 对应的hash 值， 扩展名称， 使用占位符
publicPath: '../images', // 图片的路径前缀， 在css 文件中的增加
// webpack 打包的时候， 会获取真实的图片， 需要在前面增加对应的真实位置， 所以加 '../images' , 获取
// dist 打包中的images 目录
outputPath: 'images', // 对所有的图片， 在css 中引用可以都增加../ , 才能遭到路径
// outputPath 打包后文件存放文件的目录， 默认值为undefind, dist 目录存放的位置
limit: 1024 * 3 // 大图将将会不转， 小图讲会转换， 转换为 base64, 存储在css
// name: 'images/[name]-[hash].[ext]' //或生成一个images 目录
} }
},
{
test: /\.(woff|woff2|svg|eot)$/, // 处理各种图片
use: { loader: 'file-loader', options: {
name: "[name].[ext]",
publicPath: '../webfont',
outputPath: 'webfont'
} }
}
]
},
plugins: [
// 两个文件的打包
new htmlWebpackPlugin( // 打包生成两个文件， 生成的文件， 并未对文件做取法
{
template: './src/index.html', // 模版配置
filename: 'index.html', // 文件名配置
chunks: ['main'] // 标示放入的文件， 配置的哪一个chunk 放入 对应的html
}
),
new htmlWebpackPlugin( // 打包生成两个文件
{
template: './src/list.html', // 模版配置
filename: 'list.html', // 文件名配置
chunks: ['list']// 配置的哪一个chunk 放入 对应的html
}
),
new CleanWebpackPlugin(),
new mincssExtractPlugin({ // 插件的使用
// filename: "css/[name].css"
filename: "css/[name]-[contenthash:8].css" // 对css 的chunkhash
})]
}
