Vue3:Webpack 中的 loader

1、 loader 概述

• loader作用

2、打包处理 css 文件

• css处理
• webpack.config.js文件配置

3、打包处理 less 文件

• less处理

       // 导入样式（在 webpack 中，一切皆模块，都可以通过 ES6 导入语法进行导入和使用）
      // 如果某个模块中，使用 from 接收到的成员为 undefined，则没必要进行接收
     // index.js文件中引入
         import '@/css/index.css'
        import '@/css/index.less'

4、 打包处理样式表中与 url 路径相关的文件

• url处理

5、 babel-loader

• webpack 只能打包处理一部分高级的JavaScript 语法。对于那些 webpack 无法处理的高级 js 语法，需要借助于 babel-loader 进行打包处理。

• 运行如下的命令安装对应的依赖包： npm i babel-loader@8.2.2 @babel/core@7.14.6 @babel/plugin-proposal-decorators@7.14.5 -D

• webpack.config.js文件配置
• babel-loader配置

• module.exports = {
  // 声明 babel 可用的插件
  // 将来，webpack 在调用 babel-loader 的时候，会先加载 plugins 插件来使用
  plugins: [['@babel/plugin-proposal-decorators', { legacy: true }]]
  }

6、 配置 webpack 的打包发布

• 打包发布设置
• JS打包
• 图片打包

7、 自动清理 dist 目录下的旧文件

• webpack.config.js配置