Webpack配置

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