webpack5学习笔记
webpack5学习笔记
cdn资源 cdn资源
webpack笔记
解决作用域问题
快速执行函数
;(function(){
…
})
解决代码拆分问题
node
commonjs
模块化
解决浏览器支持问题
requirejs
想要主js调用别的js要在主js前引入
hello.js
export hello()
main.js
hello()
import hello.js
import main.js
安装webpack
先安装node
然后安装webpack webpack-cli 全局安装(不推荐，会锁定版本)
npm install webpack webpack-cli --global
本地安装
npm init
npm install webpack webpack-cli --save-dev
- 1
- 2
- 3
cmd cls清屏
webpack打包
webpakc
- 1
webpack --stats detailed 查看详细打包信息
npx牛逼
配置入口文件(指令不如文件配置不可保存)
webpack --entry xxx
加 --mode production生产环境
配置出口
output
文件配置
webpack.config.js文件
绝对路径 使用 require(‘path’)
path.resolve(__dirname,'xxx')
module.exports = {
entry:'',
output:{
filename: '',
path: '结对路径''
}
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
自动引入资源
插件-html-webpack-plugin
npm install html-webpack-plugin
- 1
引入
const HtmlWebpackPlugin = require('html-webpack-plugin')
- 1
在根{}下
plugins:[
new HtmlWebpackPlugin()
]
配置HtmlWebpackPlugin
new HtmlWebpackPlugin({
template: './index.html', 模板文件
filename: 'app.html', 生成文件名
inject: 'body' 在哪个标签引入
})
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
清理dist(清理旧的打包)
在output选项里面
output:{
filename: '',
path: '结对路径'',
clean: true
}
- 1
- 2
- 3
- 4
- 5
搭建开发环境
mode选项
定位错误
更好显示代码定位错误
devtool: 'inline-source-map',
- 1
监听代码变化
webpack --watch
- 1
使用 webpack-dev-server
npm install webpack-dev-server
- 1
加-D 在本地开发环境运行
在 配置文件中
devServer: {
devServer: {
static: './dist' //注意这里的./dist是路径
}
}
- 1
- 2
- 3
- 4
- 5
在控制台 webpack-dev-server
资源模块
module: {
rules: [
{
test: /\.png$/,
type: 'asset/resource'
}
]
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
在js 文件中引入
import imgsrc from './assets/img-1.png'
const img = document.createElement('img') 创建一个照片元素
img.src = imgsrc 添加路径
document.body.appendChild(img) 将照片添加进页面
- 1
- 2
- 3
- 4
- 5
webpack-dev-server --open 加–open 默认打开
在output中定义导出路径以及名字
output: {
filename: 'bundle.js',
path: path.resolve(__dirname,'./dist'),
clean: true,
assetModuleFilename: 'images/test.png'
},
- 1
- 2
- 3
- 4
- 5
- 6
assetModuleFilename: ‘images/[contenthash].png’
[contenthash]可自动根据hash来生成文件名
assetModuleFilename: ‘images/[contenthash][ext]’
[contenthash]可自动根据hash来生成文件名以及扩展名
若在module rules generator配置
则generator高于output
inline配置资源 使图片变成base64资源
使图片变成base64资源
test: /\.svg$/,
type: 'asset/inline'
- 1
- 2
配置source
test: /\.txt$/,
type: 'asset/source
- 1
- 2
配置asset
test: /\.jpg$/,
type: 'asset'
- 1
- 2
自动选择url还是文件base64 一般小于8k会生成base64
可通过追加 parser 来控制
test: /\.jpg$/,
type: 'asset',
parser: {
dataUrlCondition: {
maxSize: 4*1024 //默认大小4*1024
}
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
loader使用
安装css-loader以及style-loader
执行
npm install css-loader -D
npm install style-loader -D
- 1
- 2
- 3
配置
{
test: /\.css$/,
use: ['style-loader','css-loader']
}
- 1
- 2
- 3
- 4
在index.js引入
import ‘./style.css’
先执行css-loader再执行style-loader
安装配置less-loader css-loader
npm install less-loader less -D
- 1
配置
{
test: /\.(css|less)$/,
use: ['style-loader','css-loader','less-loader']
}
- 1
- 2
- 3
- 4
在index.js引入
import ‘./style.less’
抽离和压缩css
安装插件
npm install mini-css-extract-plugin -D
- 1
在webpack.js引入
const MiniCssExtract = require(‘mini-css-extract-plugin’)
在plugins中添加
new MiniCssExtract()
配置
{
test: /\.(css|less)$/,
use: [MiniCssExtract.loader','css-loader','less-loader']
}
- 1
- 2
- 3
- 4
更换style-loader为MiniCssExtract.loader
style-loader作用是将css连接到页面
而为了抽离改为MiniCssExtract.loader
自定义生成的文件名
new MiniCssExtract({
filename: ‘styles/[contenthash].css’
})
压缩
安装插件
npm install css-minimizer-webpack-plugin -D
- 1
引入
const CssMinimizerPlugin = require(‘css-minimizer-webpack-plugin’)
在优化配置中配置
webpack配置根级
optimization: {
minimizer: [
new CssMinimizerPlugin()
]
}
- 1
- 2
- 3
- 4
- 5
且mode更换为生产环境
mode: ‘production’,
加载images图像
图片优先级
.block-bg{
background-image: url(./assets/webpack-logo.svg) !important;
}
!important 使优先级最高
加载字体
配置webpack
{
test: /\.(woff|woff2|eot|ttf|otf)$/,
type: 'asset/resource'
}
- 1
- 2
- 3
- 4
在css文件引入字体文件
@font-face {
font-family: 'iconfont';
src: url('./assets/iconfont.ttf');
}
.icon{
font-family: 'iconfont';
font-size: 30px;
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
在index.js引入字体
const span = document.createElement('span')
span.classList.add('icon')
span.innerHTML = ''
document.body.appendChild(span)
- 1
- 2
- 3
- 4
- 5
加载数据 csv-loader xml-loader
安装
npm install csv-loader xml-loader -D
- 1
配置
{
test: /\.(csv|tsv)$/,
usr: 'csv-loader'
},
{
test: /\.xml$/,
usr: 'xml-loader'
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
引入数据在index.js
import Data from './assets/data.xml'
import Notes from './assets/data.csv'
- 1
- 2
xml转成js对象
csv转换为数组
自定义JSON的parser 例如toml yaml json5
安装
npm install toml yaml json5 -D
- 1
配置webpack
const toml = require('toml')
const yaml =require('yaml')
const json5 = require('json5')
- 1
- 2
- 3
{
test: /\.toml$/,
type: 'json',
parser: {
parse: toml.parse
}
},
{
test: /\.yaml$/,
type: 'json',
parser: {
parse: yaml.parse
}
},
{
test: /\.json5$/,
type: 'json',
parser: {
parse: json5.parse
}
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
使用文件
文章来源: dmhsq.blog.csdn.net，作者：代码哈士奇，版权归原作者所有，如需转载，请联系作者。
原文链接：dmhsq.blog.csdn.net/article/details/122435393
- 点赞
- 收藏
- 关注作者
评论（0）