使用 Vue 脚手架，为什么要学 webpack？(1)

使用 npm -v 检查 npm的版本

2.1、安装webpack

安装可分：为全局安装和当前项目安装。

全局安装：npm install webpack -g

在c盘下会生成 node_modules 文件夹中会包含 webpack，此时此刻我们可以使用 webpack命令了；

项目内安装：npm install webpack --save 或者npm install webpack --save-dev

npm install webpack --save 与 npm install webpack --save-dev 区别在于是否将依赖存入 dependencies 以及 devdependencies。

2.2、生成 package.json

创建一个webpack项目文件夹，进入项目文件内根目录下，执行命令：npm init

如图：根据问题提示，输入对应信息后，会在根目录下生成 package.json 文件。

2.3、新建项目内容

dist – distribution（发布）

创建 dist 文件夹，用于存储打包之后的文件。

创建 src 文件夹，文件夹内新建 index.js 作为入口；创建index.html文件，并创建main.js文件并引入html。

2.3、配置 webpack

webpack.config.js 代码如下：

module.exports={

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

output:{

path:‘./dist’,

filename:‘bundle.js’

}

}

entry(入口)：配置入口文件

output(输出)：设置打包后文件存放路径(path) 和文件名(filename)。

运行命令：webpack --config webpack.config.js，进行打包。

命令报错：

• Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema.

• - configuration.output.path: The provided value “./dist” is not an absolute path!

• -> The output directory as **absolute path** (required).

提示路径需要设置绝对路径。

2.4、打包文件

此时需要引入 node 的 path 模块。并修改 path 配置，把路径设置为当前项目根目录下。

修改 package.config.js 文件代码如下：

const path = require(‘path’)

module.exports={

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

output:{

path:path.resolve(__dirname,‘dist’),

filename:‘bundle.js’

}

}

重新运行命令：webpack --config webpack.config.js，进行打包。此时就会在dist文件夹内出现了一个被打包后的 bundle.js。

三、webpack 用来做什么？

JavaScript

• js的基本类型有哪些？引用类型有哪些？null和undefined的区别。

• 如何判断一个变量是Array类型？如何判断一个变量是Number类型？（都不止一种）

• Object是引用类型嘛？引用类型和基本类型有什么区别？哪个是存在堆哪一个是存在栈上面的？

• JS常见的dom操作api

• 解释一下事件冒泡和事件捕获

• 事件委托（手写例子），事件冒泡和捕获，如何阻止冒泡？如何组织默认事件？

• 对闭包的理解？什么时候构成闭包？闭包的实现方法？闭包的优缺点？

• this有哪些使用场景？跟C,Java中的this有什么区别？如何改变this的值？

• call，apply，bind

• 显示原型和隐式原型，手绘原型链，原型链是什么？为什么要有原型链

• 创建对象的多种方式

• 实现继承的多种方式和优缺点

• new 一个对象具体做了什么

• 手写Ajax，XMLHttpRequest

• 变量提升

• 举例说明一个匿名函数的典型用例

• 指出JS的宿主对象和原生对象的区别，为什么扩展JS内置对象不是好的做法？有哪些内置对象和内置函数？

• attribute和property的区别

• document load和document DOMContentLoaded两个事件的区别

• JS代码调试

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