2024年最全Day04-Webpack打包js、css文件(2)，web前端面试项目有哪些

刷面试题

刷题的重要性，不用多说。对于应届生或工作年限不长的人来说，刷面试题一方面能够尽可能地快速自己对某个技术点的理解，另一方面在面试时，有一定几率被问到相同或相似题，另外或多或少也能够为自己面试增加一些自信心，可见适当的刷题是很有必要的。

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

• 前端字节跳动真题解析

  

• 【269页】前端大厂面试题宝典

  

最后平时要进行自我分析与评价，做好职业规划，不断摸索，提高自己的编程能力和抽象思维能力。大厂面试远没有我们想的那么困难，摆好心态，做好准备，你也可以的。

1、全局安装Webpack

---

npm install -g webpack webpack-cli

2、查看Webpack版本号

---

webpack -v

三、初始化项目—Webpack打包js文件

====================================================================================

1、首先在vscode工作空间中创建文件夹Webpackdemo

---

2、初始化项目环境，点击Webpackdemo文件夹，在终端中打开。

---

npm init -y

3、创建src文件夹

---

4、src下创建common.js

---

exports.info = function (str){

document.write(str)

}

5、src下创建utils.js

---

exports.add = function(a,b){

return a+b;

}

6、src下创建main.js

---

const common = require(‘./common’)

const utils = require(‘./utils’)

common.info(‘hello world!’+utils.add(1,2));

四、JS打包

=====================================================================

1、webpackdemo目录下创建配置文件webpack.config.js

---

以下配置的意思是：读取当前项目目录下src文件夹中的main.js（入口文件）内容，分析资源依赖，把相关的js文件打包，打包后的文件放入当前目录的dist文件夹下，打包后的js文件名为bundle.js

const path = require(“path”); //Node.js内置模块

module.exports = {

entry: ‘./src/main.js’, //配置入口文件

output: {

path: path.resolve(__dirname, ‘./dist’), //输出路径，__dirname：当前文件所在路径

filename: ‘bundle.js’ //输出文件

}

}

2、打包

---

打包方式一：命令行执行编译命令

webpack #有黄色警告

webpack --mode=development #没有警告

#执行后查看bundle.js 里面包含了上面两个js文件的内容并惊醒了代码压缩

运行成功后生成bundle.js文件

打包方式二：

打包js文件也可以配置项目的npm运行命令，修改package.json文件

“scripts”: {

//…,

“dev”: “webpack --mode=development”

}

运行npm命令执行打包

npm run dev

3、webpackdemo目录下创建index.html

---

引用bundle.js

4、浏览器中查看index.html

---

五、CSS打包

======================================================================

1、安装style-loader和 css-loader

最后更多分享：前端字节跳动真题解析

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

• 

FF,t_70)

五、CSS打包

======================================================================

1、安装style-loader和 css-loader

最后更多分享：前端字节跳动真题解析

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

• [外链图片转存中…(img-4kuNlWOl-1715642237440)]