2024年前端最新Vue-1-webpack使用，狂刷200道数据结构与算法

总结

• 框架原理真的深入某一部分具体的代码和实现方式时，要多注意到细节，不要只能写出一个框架。

• 算法方面很薄弱的，最好多刷一刷，不然影响你的工资和成功率😯

• 在投递简历之前，最好通过各种渠道找到公司内部的人，先提前了解业务，也可以帮助后期优秀 offer 的决策。

• 要勇于说不，对于某些 offer 待遇不满意、业务不喜欢，应该相信自己，不要因为当下没有更好的 offer 而投降，一份工作短则一年长则 N 年，为了幸福生活要慎重选择！！！

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

喜欢这篇文章文章的小伙伴们点赞+转发支持，你们的支持是我最大的动力！

“main”: “index.js”,

“scripts”: {

“start”: “webpack serve --config config/webpack.config.dev.js”,

“dev”: “webpack --config config/webpack.config.dev.js”,

“build”: “webpack --config config/webpack.config.prod.js”

},

“keywords”: [],

“author”: “”,

“license”: “ISC”,

“devDependencies”: {

“webpack”: “^5.72.0”,

“webpack-cli”: “^4.9.2”,

“webpack-dev-server”: “^4.9.0”

},

“dependencies”: {

“css-loader”: “^6.7.1”,

“html-webpack-plugin”: “^5.5.0”,

“lodash”: “^4.17.21”,

“style-loader”: “^3.3.1”

}

}

• start命令行输入npm start快捷启动

• dev命令行输入npm run dev快捷启动

• build命令行输入npm run build快捷启动生产模式

• webpack是依赖的包

• webpack-dev-server启动浏览器

• css-loader负责将.css文件进行解析

• style-loader完成页面插入css操作

• html-webpack-plugin创建一个 index.html 文件， 并在这个文件中插入一个 script 标签

• lodash模块

• style-loader/css-loader

• sass-loader/less-loader

• file-loader/url-loader

• vue-loader

• babel-loader

4. webpack.config.dev.js这里写打包核心功能

const path = require(‘path’)

const HtmlWebpackPlugin = require(‘html-webpack-plugin’);

module.exports = {

mode: ‘development’, // 模式

entry: ‘./src/index.js’, // 入口

output: { // 输出

path: path.join(__dirname, ‘…/dist’),

filename: ‘index.[chunkhash].js’,

},

module: { // 处理模块

rules: [ // 规则

{

test: /.css$/i, // 以 .css 作为后缀的文件

use: [‘style-loader’, ‘css-loader’], // 使用 loader

},

],

react和vue的比较

相同
1）vitual dom
2）组件化
3）props，单一数据流

不同点
1）react是jsx和模板；（jsx可以进行更多的js逻辑和操作）
2）状态管理（react）
3）对象属性（vue）
4）vue：view——medol之间双向绑定
5）vue：组件之间的通信（props，callback，emit）

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

题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**

[外链图片转存中…(img-fgYWgxHr-1715012718383)]

[外链图片转存中…(img-gclbOzxU-1715012718384)]