前端工具webpack-基础使用第2篇
程序员文章站
2022-03-11 09:10:28
开门见山今天继续给大家带来一些webpack相关的内容文件资源加载器//在项目中使用img、font、由于webpack无法识别这些文件,这时候我们要使用文件资源加载器file-loader//安装依赖 yarn add file-loader --dev import createHeading from './heading.js';import "./main.css"import icon from './wolf.jpg';const heading = createH....
开门见山
今天继续给大家带来一些webpack相关的内容
文件资源加载器
//在项目中使用img、font、由于webpack无法识别这些文件,这时候我们要使用文件资源加载器file-loader
//安装依赖 yarn add file-loader --dev
import createHeading from './heading.js';
import "./main.css"
import icon from './wolf.jpg';
const heading = createHeading();
const image = new Image()
image.src = icon;
document.body.append(image)
document.body.append(heading)
//webpack配置
const path = require('path');
module.exports = {
mode: "none", //none/development/production
entry: "./src/main.js", //项目的入口文件
output: {
filename: "bundle.js", //输出的文件名
path: path.join(__dirname, 'dist'), //指定输出的路径,
publicPath: "dist/", //此处的“/”不能省略
},
module: {
rules: [{
test: /.css$/,
use: [
'style-loader', 'css-loader'
]
},
{
test: /.jpg$/,
use: 'file-loader'
}
]
}
}
//运行webpack即可
webpack url资源加载器
url资源加载器,本质上就是用url地址来表示图片或者是字体,默认转换成base64编码
webpack配置如下
const path = require('path');
module.exports = {
mode: "none", //none/development/production
entry: "./src/main.js", //项目的入口文件
output: {
filename: "bundle.js", //输出的文件名
path: path.join(__dirname, 'dist'), //指定输出的路径,
publicPath: "dist/", //此处的“/”不能省略
},
module: {
rules: [{
test: /.css$/,
use: [
'style-loader', 'css-loader'
]
},
{
test: /.jpg$/,
use: 'url-loader'//使用url-loader而不是file-loader
}
]
}
}
//url-loader最佳实践方案
//小文件使用url-loader,减少请求次数
//大文件单独提取存放,提高加载速度 webpack配置如下
const path = require('path');
module.exports = {
mode: "none", //none/development/production
entry: "./src/main.js", //项目的入口文件
output: {
filename: "bundle.js", //输出的文件名
path: path.join(__dirname, 'dist'), //指定输出的路径,
publicPath: "dist/", //此处的“/”不能省略
},
module: {
rules: [{
test: /.css$/,
use: [
'style-loader', 'css-loader'
]
},
{
test: /.jpg$/,
use: {
loader: "url-loader",
options: {
limit: 10 * 1024 //10KB 小于10KB使用url-loader,大于10KB使用file-loader
//超出10KB文件单独提取存放
//小于10KB文件转换成url嵌入代码中
//需要注意的是如果使用url-loader那你的项目中要安装file-loader 因为超出10KB
//还是会使用file-loader
}
}
}
]
}
}
谢谢观看,如有不足,敬请指教
本文地址:https://blog.csdn.net/handsomezhanghui/article/details/109255862
上一篇: 祖传好运 Python计算