2024年最全2024基于webpack从0搭建vue项目，vue2，精选前端面试真题集锦

结尾

学习html5、css、javascript这些基础知识，学习的渠道很多，就不多说了，例如，一些其他的优秀博客。但是本人觉得看书也很必要，可以节省很多时间，常见的javascript的书，例如：javascript的高级程序设计，是每位前端工程师必不可少的一本书，边看边用，了解js的一些基本知识，基本上很全面了，如果有时间可以读一些，js性能相关的书籍，以及设计者模式，在实践中都会用的到。

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

安装 webpack CLI

命令 npm install --save-dev webpack-cli

安装 webpack

命令 npm i webpack -D

对 -g -S -D 的补充

npm i xx -g：npm install xx --global的简写，对模块进行全局安装。

所谓全局安装，是指把模块安装到操作系统上，全局是指操作系统，全局安装完成后，一般会安装到AppDataAppData\Roaming\npm目录下。

如：npm install webpack -g，就是全局安装webpack，在操作系统的任何一个目录下都可以使用webpack所提供的指令。

npm i xx -D：npm install xx --save-dev的简写，对模块进行局部安装，模块写入到 devDependencies 对象。

局部的意思是只针对当前项目，模块一般安装到项目文件夹下的node_modules文件夹下。

devDependencies对象，是我们开发的时候需要用到的一些包，只用于开发阶段，真正打包上线的时候并不需要这些包，

因为这些工具只是你用来打包代码的，是用来识别特定文件以及代码，帮助我们生产最终文件的。如npm i vue-loader

vue-template-complier -D,就是在Vue项目中安装vue模板文件的解析插件，经过配置后即可在项目中解析vue模板

npm i xx -S：npm install xx --save 的简写，同上也是对模块进行局部安装，不同的是模块写入到 dependencies对象。

模块同上一样将安装到项目文件夹下的node_modules文件夹下。

dependencies对象，这个与devDependencies不同，是需要发布到生产环境中的，就比如你要跑一个基于vue的项目，

所以需要vue.js来支持，vue.js文件就需要跟随项目到最终的生产环境。npm i vue -S即可将Vue模块安装到项目的依赖中，

并一同发布到生产环境。

对插件版本的补充 可以cv到package.json 直接 npm i

{

“name”: “webpackProject”,

“version”: “1.0.0”,

“description”: “”,

“main”: “webpack.config.js”,

“scripts”: {

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

“serve”: “webpack serve”

},

“keywords”: [],

“author”: “”,

“license”: “ISC”,

“devDependencies”: {

“@babel/core”: “^7.17.5”,

“@babel/preset-env”: “^7.16.11”,

“babel-loader”: “^8.2.3”,

“clean-webpack-plugin”: “^4.0.0”,

“css-loader”: “^6.6.0”,

“file-loader”: “^6.2.0”,

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

“sass”: “^1.49.8”,

“sass-loader”: “^12.6.0”,

“style-loader”: “^3.3.1”,

“url-loader”: “^4.1.1”,

“vue-loader”: “^17.0.0”,

“vue-template-compiler”: “^2.6.14”,

“webpack”: “^5.69.1”,

“webpack-cli”: “^4.9.2”,

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

},

“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

结尾

学习html5、css、javascript这些基础知识，学习的渠道很多，就不多说了，例如，一些其他的优秀博客。但是本人觉得看书也很必要，可以节省很多时间，常见的javascript的书，例如：javascript的高级程序设计，是每位前端工程师必不可少的一本书，边看边用，了解js的一些基本知识，基本上很全面了，如果有时间可以读一些，js性能相关的书籍，以及设计者模式，在实践中都会用的到。

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

r’, ‘css-loader’, ‘sass-loader’

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

结尾

学习html5、css、javascript这些基础知识，学习的渠道很多，就不多说了，例如，一些其他的优秀博客。但是本人觉得看书也很必要，可以节省很多时间，常见的javascript的书，例如：javascript的高级程序设计，是每位前端工程师必不可少的一本书，边看边用，了解js的一些基本知识，基本上很全面了，如果有时间可以读一些，js性能相关的书籍，以及设计者模式，在实践中都会用的到。

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

[外链图片转存中…(img-Sq56SCIY-1715638539750)]