2024年最新2024基于webpack从0搭建vue项目，vue2(3)，2024年最新面试web前端开发十大问题是什么

最后

基础知识是前端一面必问的，如果你在基础知识这一块翻车了，就算你框架玩的再6，webpack、git、node学习的再好也无济于事，因为对方就不会再给你展示的机会，千万不要因为基础错过了自己心怡的公司。前端的基础知识杂且多，并不是理解就ok了，有些是真的要去记。当然了我们是牛x的前端工程师，每天像背英语单词一样去背知识点就没必要了，只要平时工作中多注意总结，面试前端刷下题目就可以了。

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

// 配置 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’

import App from ‘./App.vue’// 创建app.vue 入口组件

createApp(App).mount(‘#app’)

安装vue 2.0 的 vue 版本配置 以及报错的解决

vue-loader 不能为 16 以上

vue 版本为 2.6.1 必须 和 vue-template-compiler 2.6.1 一致

最后

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

给大家分享一些关于HTML的面试题。

rom ‘vue’

import App from ‘./App.vue’// 创建app.vue 入口组件

createApp(App).mount(‘#app’)

安装vue 2.0 的 vue 版本配置 以及报错的解决

vue-loader 不能为 16 以上

vue 版本为 2.6.1 必须 和 vue-template-compiler 2.6.1 一致

最后

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

给大家分享一些关于HTML的面试题。

[外链图片转存中…(img-H0k8Poue-1715693073972)]
[外链图片转存中…(img-UCbNjLJM-1715693073973)]