babel/plugin-transform-runtime: 禁用了 Babel 自动对每个文件的 runtime 注入，而是引入 @babel/plugin-transform-runtime 并且使所有辅助代码从这里引用。将plugins: ["@babel/plugin-transform-runtime"], // 减少代码体积 这段加入到babel-loader的属性中。如果项目中图片都是在线链接，那么就不需要了。开发如果项目中引用了较多图片，那么图片体积会比较大，将来请求速度比较慢。

当构建后代码出错了，会通过 xxx.map 文件，从构建后代码出错位置找到映射后源代码出错位置，从而让浏览器提示源代码文件出错位置，帮助我们更快的找到错误根源。这个时候再打包试试看，其实目前文件比较小的话，实际打包的速度比之前是慢的，只有文件的内容足够大时，处在一个临界值的时候，才发现用这个方法打包速度大大提高！打包完代码出错完全找不到哪里出错了，如果在配置文件中配置好属性，就能方便的找到打包后出错的代码所在行。在module的rules中的引入babel-loader的use中添加如下代码。

开发环境：就是我们开发代码时使用的模式。这个模式我们做两件事情：1、编译代码，使浏览器能识别运行2、代码质量检查，树立代码规范生产环境：开发完成代码后，我们需要得到代码将来部署上线。

注意：如果上面的操作中如安装less的时候，报错Vue安装loader报错：Syntax Error: Error: Cannot find module ‘less‘ 类似的信息，解决方法是：重新安装这个loader时@版本号就可以了，例如：npm i less-loader@6 -D就可以了。（5）用webpack打包，生成会发现报错了，原因是main.js中不应该用var定义变量，按照.eslintrc.js定义的规则中，是不能用var 定义变量的，所以改成const后，打包就不会报错了。

Webpack是一个用于现代 JavaScript 应用程序的静态模块打包工具。它会以一个或多个文件作为打包的入口，将我们整个项目所有文件编译组合成一个或多个文件输出出去。