babelrc
.babelrc和babel.config.js区别
Babel是什么
Babel 是一个 JavaScript 编译器，主要用于将 ECMAScript 2015+ 版本的代码转换为向后兼容的 JavaScript 语法，以便能够运行低版本的浏览器中。
Bable作用
- ES6+语法转换
- 转换JSX语法（js 内定义的一套类XML 语法，可以解析出目标js 代码，颠覆传统js 写法。HTML 由浏览器解析，而JSX 是由js 解析。）
- 类型注释（Flow和TypeScript），Babel可以删除类型注释
Babel 的优点
（1）Babel 构建在插件之上。插件又可以分为：
- 预设（preset）：插件的封装版
- 插件（plugin）：一个个转换插件
（2）可调试
由于 Babel 支持 Source map，因此你可以轻松调试编译后的代码。
（3）符合规范
Babel 尽最大可能遵循 ECMAScript 标准。不过，Babel 还提供了特定的选项来对标准和性能做权衡。
（4）代码紧凑
Babel 尽可能用最少的代码并且不依赖太大量的运行环境。
有些情况是很难达成的这一愿望的，因此 Babel 提供了 "loose" 参数，用以在特定的转换情况下在符合规范、文件大小和速度之间做折中。
babelrc 和 babel.config.js区别
- babelrc 只会影响本项目中的代码
- babel.config.js会影响整个项目中的代码，包含node_modules中的代码
- 推荐使用babel.config.js
webpack.definePlugin用于创建编译时配置的全局常量，以方便进行环境转换，比如NODE_ENV就是通过这个属性配置的
- vue-loader：解析和转换 .vue 文件，提取出其中的逻辑代码 script、样式代码 style、以及 HTML 模版 template，再分别把它们交给对应的 Loader 去处理。
- css-loader：加载由 vue-loader 提取出的 CSS 代码。
- vue-template-compiler：把 vue-loader 提取出的 HTML 模版编译成对应的可执行的 JavaScript 代码
- mini-css-extract-plugin：会讲css提取到单独的文件中，为每个包含css的js文件创建一个css文件，并且支持css和sourcemaps的按需加载
- 总结;vue-loader的作用就是提取。
- webpack升级老是报错module build failed (from ./node_modules/style-loader/dist/cjs.js) this.getoptions is not a function表示style-loader下载的版本有问题
https://www.xxwwp.top/article/Babel%EF%BC%88%E4%B8%80%EF%BC%89%E5%AE%89%E8%A3%85%E3%80%81%E9%85%8D%E7%BD%AE%E5%92%8C%E5%9F%BA%E6%9C%AC%E4%BD%BF%E7%94%A8
https://www.jianshu.com/p/7fd02a587a35
https://www.keisei.top/webpack-behind-the-scene/
https://juejin.cn/post/6844904132294213639
webpack4升级指南：https://juejin.cn/post/6844903795265126413
vue-loader：https://vue-loader.vuejs.org/zh/migrating.html#%E7%8E%B0%E5%9C%A8%E4%BD%A0%E9%9C%80%E8%A6%81%E4%B8%80%E4%B8%AA%E6%8F%92%E4%BB%B6
报错new _validationerror.default(errors schema configuration)
写法有问题https://www.npmjs.com/package/copy-webpack-plugin
const CopyPlugin = require("copy-webpack-plugin");
module.exports = {
plugins: [
new CopyPlugin({
patterns: [
{ from: "source", to: "dest" },
{ from: "other", to: "public" },
],
}),
],
};
Webpack升级遇到的问题
- 遇到最多的问题是引入插件的版本有问题，要么太高要么太低
- 根据网上的文章去改发现问题更多，可以直接用网上写好的webpack
