webpack的介绍、安装、使用、配置,美团前端面试题

87 阅读3分钟

1、什么是webpack?

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

将css、js、png等一些静态的文件进行打包的工具

在这里插入图片描述

2、前端模块化

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

在这里插入图片描述

3、打包

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

在这里插入图片描述

4、webpack和grunt/gulp对比

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

在这里插入图片描述

5、webpack/node/npm三者之间的关系

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

在这里插入图片描述

6、webpack的安装

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

在这里插入图片描述

本机安装webpack,必须使用管理员身份运行命令行

在这里插入图片描述

安装成功后,查看webpack版本

在这里插入图片描述安装成功。

7、webpack的使用(案例)

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

准备工作

在这里插入图片描述

js文件打包

在这里插入图片描述

使用打包后的文件

在这里插入图片描述

7.1、CommonJS规范结合webpack完成模块开发


function add(num1,num2){

return num1+num2

}

function mul(num1,num2){

return num1*num2

}

module.exports = {

add,

mul

}

// 1.使用commonjs的模块化规范

const {add,mul} = require('./mathUtils.js')

console.log(add(10,20));

console.log(mul(20,30));

Document

7.2、ES6规范结合webpack完成模块开发


export const name = 'aaa';

export const age = 18;

export const height=1.88;

// 2.使用ES6的模块化规范

最后

好了,这就是整理的前端从入门到放弃的学习笔记,还有很多没有整理到,我也算是边学边去整理,后续还会慢慢完善,这些相信够你学一阵子了。

做程序员,做前端工程师,真的是一个学习就会有回报的职业,不看出身高低,不看学历强弱,只要你的技术达到应有的水准,就能够得到对应的回报。

学习从来没有一蹴而就,都是持之以恒的,正所谓活到老学到老,真正懂得学习的人,才不会被这个时代的洪流所淘汰。

开源分享:docs.qq.com/doc/DSmRnRG…