使用webpack5打包图片资源文件,简单易操作,前端核心知识点

10 阅读2分钟

总结

我在成长过程中也是一路摸爬滚打,没有任何人的指点,所以走的很艰难。例如在大三的时候,如果有个学长可以阶段性的指点一二,如果有已经工作的师兄可以告诉我工作上需要什么,我应该前面的三年可以缩短一半;后来去面试bat,失败了有5、6次,每次也不知道具体是什么原因,都是靠面试回忆去猜测可能是哪方面的问题,回来学习和完善,当你真正去招人的时候,你就会知道面试记录是多么重要,面试官可以从面试记录里看到你的成长,总是去面试,总是没有成长,就会被定义为缺乏潜力。

image image 开源分享:docs.qq.com/doc/DSmRnRG…

123

4.index.js

import './index.less'

function add(x,y) {

return x+y;

}

console.log(add(1,4));

5.index.less

.p1{

width: 100px;

height: 100px;

background: url('../img/3.jpeg') 100% 100%;

}

6.webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin');

const { resolve } = require('path');

module.exports = {

entry: './src/index.js',

output: {

filename: 'built.js',

path: resolve(__dirname, './dist')

},

module: {

rules: [

{

test: /.less$/,

//多个loader放在use数组中

use:['style-loader','css-loader','less-loader']

},

{

test:/.(jpg|png|jpeg)$/,

loader:'url-loader',

options:{

// 16kb一下

limit:8*1024,

esModule:false,

name:'[hash:9].[ext]'

},

type:'javascript/auto'

},

{

test:/.html$/,

loader:'html-loader'

}

]

},

plugins: [

//自动打包所有资源,生成的bundle.js文件自动引入到dist文件夹中的index.html

new HtmlWebpackPlugin({

Vue 面试题

1.Vue 双向绑定原理 2.描述下 vue 从初始化页面–修改数据–刷新页面 UI 的过程? 3.你是如何理解 Vue 的响应式系统的? 4.虚拟 DOM 实现原理 5.既然 Vue 通过数据劫持可以精准探测数据变化,为什么还需要虚拟 DOM 进行 diff 检测差异? 6.Vue 中 key 值的作用? 7.Vue 的生命周期 8.Vue 组件间通信有哪些方式? 9.watch、methods 和 computed 的区别? 10.vue 中怎么重置 data? 11.组件中写 name 选项有什么作用? 12.vue-router 有哪些钩子函数? 13.route 和 router 的区别是什么? 14.说一下 Vue 和 React 的认识,做一个简单的对比 15.Vue 的 nextTick 的原理是什么? 16.Vuex 有哪几种属性? 17.vue 首屏加载优化 18.Vue 3.0 有没有过了解? 19.vue-cli 替我们做了哪些工作?

开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】