mkw测试必学：探秘大厂全链路质量保障体系fen享ZY

配置步骤

下载本门课程ZY-》：https://www.97yrbl.com/t-1380.html

先把入口文件main.js的所有代码都注释掉，在根目录创建文件夹:webpack(打包脚本的文件夹),webpack文件夹下创建 webpack.common.js(webpack通用配置)、webpack.development.js(webpack开发环境下配置脚本)、webpack.product.js(webpack生产环境下配置脚本)三个文件。

1. 在main.js引入一个最简单的.vue文件，只有template模版，配置vue-loader，使项目正常运行。在script脚本处编写命令行：

{
    "dev": "webpack-dev-server  ./webpack/webpack.common.js --mode='development'",    
    "build": "webpack --config ./webpack/webpack.common.js  --mode='production'"
  }
复制代码

2. 在.vue文件中写js代码，配置 babel，使项目正常运行。
3. 在.vue文件中写css、less代码，配置 css和less，使项目正常运行。
4. 在.vue文件中引入图片，字体等，配置 静态资源，使项目正常运行。
5. 在app.vue文件内只引入简单组件，再尝试引入一个页面，使项目正常运行。此时项目的基础配置完成
6. 区分环境变量，分开打包并配置脚本命令并优化打包脚本

babel配置

@babel/core: 把js 代码分析成ast ，方便各个插件分析语法进行相应的处理
@babel/cli: 是babel 提供的命令行工具，用于命令行下编译源代码
babel-loader: 在Webpack打包的时候，用Babel将ES6的代码转换成ES5版本的,开启缓存cacheDirectory:true，可以在node_modules/.cache内看到缓存文件
@babel/preset-env: 可以根据配置的目标浏览器或者运行环境来自动将ES2015+的代码转换为es5,配置useBuiltIns:true可实现按需引入。配置corejs:3指定corejs的版本。
core-js: 它是JavaScript标准库的polyfill，尽可能的进行模块化，让你能选择你需要的功能。