2024基于webpack从0搭建vue项目，vue2

“dependencies”: {

“vue”: “^3.2.31”

}

}

在根目录下创建一个 webpack.config.js 文件

// 导入核心模块 path

const path = require(‘path’)

// 导入自动生成html文件的插件

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

// 导入自动清除 dist 目录的插件

const {

CleanWebpackPlugin

} = require(‘clean-webpack-plugin’)

// 配置文件

module.exports = {

// 配置入口

entry: ‘./src/main.js’,

// webpack.config.js 文件 配置出口

output: {

filename: ‘main[hash:8].js’, // 出口文件的名称 ‘main[hash:8].js’ 清除缓存

path: path.join(__dirname, ‘/dist’) // 出口文件生成的路径

},

// 配置 mode, development 开发环境 production 生产环境

mode: ‘production’,

// 配置解析

resolve: {

alias: {

// key: value

‘@’: path.join(__dirname, ‘src’)

},

// 配置可省略的后缀

extensions: [‘.js’, ‘.css’, ‘.less’, ‘.vue’]

},

// 配置源码映射

// devtool: ‘source-map’,

// 配置 loader

module: {

// 配置规则

rules: []

},

// 配置 plugin

plugins: [

// 自动生成html文件的插件

new HtmlWebpackPlugin({

filename: ‘index.html’,

template: path.join(__dirname, ‘./public/index.html’)

}),

// 自动清除 dist 目录插件

new CleanWebpackPlugin(),

// 配置 vue loader 插件

],

// 配置开启服务器的信息

devServer: {

static: {

directory: path.join(__dirname, ‘dist’),

},

compress: true,

port: 80,

},

performance: {

hints: false

}

}

按照上述配置把对应文件给创建好，如果没有文件就会报错，

安装插件 html-webpack-plugin clean-webpack-plugin

​ 是因为 webpack.config.js 里面有用到

npm i -D html-webpack-plugin clean-webpack-plugin

配置我们的入口文件

在根目录里新建一个 src 的文件夹在里面新建一个 main.js 文件 写入js代码 然后打包后户减少

打包前

function fn() {

console.log(‘孙志豪’)

}

fn()

打包后 会多一个 dist 文件 把 function 去掉了

console.log(‘孙志豪’)

在根目录里面新建一个 public 文件夹

​ 在新建一个 index.html 输入 ! 回车 初始化

​ 写入一个 div 为 id=“#app”

找到 package.json 文件 配置打包命令

“scripts”: {

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

},

然后运行打包的命令

npm run build

此时会多一个叫 dist 的文件夹

设置启动 server 服务器

---

安装 server 启动的服务器

npm i webpack-dev-server -D

找到 package.json 文件 配置启动服务

“scripts”: {

“build”: “webpack --config webpack.config.js”,

“serve”: “webpack serve”

},

在webpack.config.js 配置开启服务器的信息

devServer: {

static: {

directory: path.join(__dirname, ‘dist’), // 出口写什么这里就写什么

},

port: 8080, // 配置端口号

open: true, // 自动打开浏览器

hot:true, // 开启模块的热更新

},

运行服务

npm run serve

安装loader

---

webpack css 样式 引入报错 和 scss 语法错误

这些操作之前需要先安装 ‘style-loader’, ‘css-loader’, ‘sass-loader’

命令 npm i css-loader style-loader sass sass-loader -D

1、在src，目录下新建一个你的css文件

2、 安装完成 在 webpack.config.js 找到 rules 配置 css loader

// 配置规则

rules: [

// * 解析css loader

{

test: /.css$/,

use: [

“style-loader”,

“css-loader”

]

},

// * 解析Scss样式 注意： 配置的顺序是反着来的 从大到小 从右到左

{

test: /.s[ca]ss$/,

use: [‘style-loader’, ‘css-loader’, ‘sass-loader’]

},

]

字体 图片 或者别的资源 url-loader file-loader url-loader 依赖于 file-loader

命令 npm i url-loader file-loader -D

安装完成 在 webpack.config.js 找到 rules 配置

rules: [

// * 解析图片 的 loader

{

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

use: “url-loader”

},

]

安装 babel-loader 用来 让 es6代码让浏览器识别的了

命令 npm install -D babel-loader @babel/core @babel/preset-env

rules: [

// * 解析es6语法 转换 es5

{

test: /.m?js$/,

exclude: /(node_modules|bower_components)/,

use: {

loader: ‘babel-loader’,

options: {

presets: [‘@babel/preset-env’]

}

}

},

]

官网： https://www.webpackjs.com/loaders/babel-loader/

vue-loader 这样安装是 vue3.0 版本

官方网址 https://vue-loader.vuejs.org/zh/

命令 npm i vue

命令 npm install -D vue-loader vue-template-compiler

引入 vue 插件

// webpack.config.js 文件

const { VueLoaderPlugin } = require(‘vue-loader’)

module.exports = {

module: {

rules: [

// * vue配置loader

{

test: /.vue$/,

loader: ‘vue-loader’

}

]

},

plugins: [

// 请确保引入这个插件！

new VueLoaderPlugin()

]

}

配置完 在main.js里面 写入配置挂载

import {

createApp

} from ‘vue’

计算机网络

• HTTP 缓存

• 你知道 302 状态码是什么嘛？你平时浏览网页的过程中遇到过哪些 302 的场景？

• HTTP 常用的请求方式，区别和用途？

• HTTPS 是什么？具体流程

• 三次握手和四次挥手

• 你对 TCP 滑动窗口有了解嘛？

• WebSocket与Ajax的区别

• 了解 WebSocket 嘛？

• HTTP 如何实现长连接？在什么时候会超时？

• TCP 如何保证有效传输及拥塞控制原理。

• TCP 协议怎么保证可靠的，UDP 为什么不可靠？

算法

• 链表

• 字符串

• 数组问题

• 二叉树

• 排序算法

• 二分查找

• 动态规划

• BFS

• 栈

• DFS

• 回溯算法