使用 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代码调试
-
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】