面试官:自己搭建过vue开发环境吗?

前段时间,看到群里一些小伙伴面试的时候被面试官问到这类题目。平时大家开发vue项目的时候,相信大部分人都是使用 vue-cli脚手架生成的项目架构,然后
npm run install 安装依赖,npm run serve启动项目然后就开始写业务代码了。

但是对项目里的webpack封装和配置了解的不清楚,容易导致出问题不知如何解决,或者不会通过webpack去扩展新功能。

该篇文章主要是想告诉小伙伴们,如何一步一步的通过 webpack4来搭建自己的vue开发环境

首先我们要知道 vue-cli生成的项目,帮我们配置好了哪些功能?

ES6代码转换成ES5代码

scss/sass/less/stylus转css

.vue文件转换成js文件

使用 jpg、png,font等资源文件

自动添加css各浏览器产商的前缀

代码热更新

资源预加载

每次构建代码清除之前生成的代码

定义环境变量

区分开发环境打包跟生产环境打包

....

面试官:自己搭建过vue开发环境吗?

1. 搭建 webpack 基本环境

该篇文章并不会细讲 webpack 是什么东西,如果还不是很清楚的话,可以先去看看 webpack官网

简单的说,webpack是一个模块打包机,可以分析你的项目依赖的模块以及一些浏览器不能直接运行的语言jsx、vue等转换成 js、css文件等,供浏览器使用。

面试官:自己搭建过vue开发环境吗?

1.1 初始化项目

在命令行中执行 npm init 然后一路回车就行了,主要是生成一些项目基本信息。最后会生成一个 package.json 文件

npm init 1.2 安装webpack

面试官:自己搭建过vue开发环境吗?

1.3 写点小代码测试一下webpack是否安装成功了

新建一个src文件夹,然后再建一个main.js文件

// src/main.js console.log('hello webpack')

然后在 package.json 下面加一个脚本命令

面试官:自己搭建过vue开发环境吗?

然后运行该命令

npm run serve

如果在 dist 目录下生成了一个main.js文件,则表示webpack工作正常

2. 开始配置功能

新建一个 build 文件夹,用来存放 webpack配置相关的文件

在build文件夹下新建一个webpack.config.js,配置webpack的基本配置

修改 webpack.config.js配置

面试官:自己搭建过vue开发环境吗?

修改package.json 文件,将之前添加的 serve 修改为

"serve": "webpack ./src/main.js --config ./build/webpack.config.js" 2.1 配置 ES6/7/8 转 ES5代码

安装相关依赖

npm install babel-loader @babel/core @babel/preset-env

修改webpack.config.js配置

面试官:自己搭建过vue开发环境吗?

在项目根目录添加一个 babel.config.js 文件

面试官:自己搭建过vue开发环境吗?

然后执行 npm run serve 命令,可以看到 ES6代码被转成了ES5代码了

2.1.1 ES6/7/8 Api 转es5

babel-loader只会将 ES6/7/8语法转换为ES5语法,但是对新api并不会转换。

我们可以通过 babel-polyfill 对一些不支持新语法的客户端提供新语法的实现

安装

npm install @babel/polyfill

修改webpack.config.js配置

在 entry 中添加 @babel-polyfill

面试官:自己搭建过vue开发环境吗?

2.1.2 按需引入polyfill

2.1.2 和 2.1.1 只需要配置一个就行

修改时间 2019-05-05、 来自评论区 兮漫天 的提醒

安装相关依赖

npm install core-js@2 @babel/runtime-corejs2 -S

修改 babel-config.js

面试官:自己搭建过vue开发环境吗?

配置了按需引入 polyfill 后,用到es6以上的函数,babel会自动导入相关的polyfill,这样能大大减少 打包编译后的体积

2.2 配置 scss 转 css

在没配置 css 相关的 loader 时,引入scss、css相关文件打包的话,会报错

安装相关依赖

npm install sass-loader dart-sass css-loader style-loader -D

sass-loader, dart-sass主要是将 scss/sass 语法转为css

css-loader主要是解析 css 文件

style-loader 主要是将 css 解析到 html页面 的 style 上

修改webpack.config.js配置

面试官:自己搭建过vue开发环境吗?

2.3 配置 postcss 实现自动添加css3前缀

安装相关依赖

npm install postcss-loader autoprefixer -D

修改webpack.config.js配置

面试官:自己搭建过vue开发环境吗?

在项目根目录下新建一个 postcss.config.js

面试官:自己搭建过vue开发环境吗?

2.3 使用 html-webpack-plugin来创建html页面

使用 html-webpack-plugin来创建html页面,并自动引入打包生成的js文件

安装依赖

npm install html-webpack-plugin -D

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wspgyx.html