工作中积累的一些方法（组件引用及webpack配置）

点点VS叉叉
249 阅读4分钟

在这篇文章中,我来整理一下,在工作中一些自我感觉使用感觉良好的方法(vue2)

1.使用方法引入组件,可以省略一些手动引入

使用require.context()方法

// js部分
<script>
 // 获取 `./` 下面以`.vue`结尾的文件
const modulesFiles = require.context('.',false,/\.vue$/);

// 获取所有文件
let keys = modulesFiles.keys();

// 创建components,方便导入组件后直接注册
let 创建components = {}

keys.forEach(k=>{
let fileName = k.split('/').pop().replace(/\.\w+$/,'')

let component = modulesFiles(k)

components[fileName] = component.default || component
})

//注册组件
export default {
components,
}


</script>

以上写的代码是针对./下的文件,实际可根据项目组件地址来写

2 将数字转换为百分位

使用toLocaleString方法

export const numberToPercentile = (num) => {
  if (typeof num !== "number" || isNaN(num)) { 
      return null; 
  }
  const percentile = num.toLocaleString(
      undefined,
      { style: 'percent', minimumFractionDigits: 2, maximumFractionDigits: 2 }
  ); 
  return percentile;
}

3 webpack 的一些配置

(1)设置图片超过限制大小,转换为base64格式

(解决问题:在生产/测试环境发现有些图片未能正常加载出来)

yarn add url-loader --dev 安装 url-loader

const { defineConfig } = require("@vue/cli-service");
const webpack = require("webpack");

module.exports = defineConfig({
  transpileDependencies: true,
  configureWebpack: {
    plugins: [
      new webpack.ProvidePlugin({
        QRCode: "qrcode", //忽略引入qrcode库
      }),
    ],
  },
  chainWebpack: (config) => {
    // 1.获取图片规则
    const imgRule = config.module.rule("images");
    // 2.清除已有的加载器
    imgRule.uses.clear();
    // 3.添加一个名为ur1-loader的加载器
    imgRule
      .use("ur1-loader")
      .loader("url-loader")
      // 4.为此加载器添加选项,图片大小超过15kb,则执行file-loader,转换为base64
      .options({
        limit: 15000,
        name: "img/[name].[hash:8].[ext]",
        fallback: "file-loader"
      })
      // 5.结束链式调用
      .end();
  }
});

(2)在生产环境中添加了一些优化插件，主要用于压缩代码和限制输出的代码块数量,以优化性能和加载速度

yarn add uglifyjs-webpack-plugin --save-dev

添加UglifyJsPlugin 插件配置，以便在生产环境中压缩和混淆JavaScript代码。具体配置如下：

  • warnings: false：禁止显示警告信息。
  • sourceMap: false：不生成源地图（source maps）。
  • parallel: true：使用多进程并行运行来提高构建速度。默认并发运行数是 os.cpus().length - 1。

    configureWebpack: config => {
    if (process.env.NODE_ENV == 'production') {
      // 压缩处理
      config.plugins.push(
        new UglifyJsPlugin({
          uglifyOptions: {
            warnings: false,
            sourceMap: false,
            parallel: true // 使用多进程并行运行来提高构建速度。默认并发运行数：os.cpus().length - 1。
          }
        })
      );
  
      config.plugins.push(
        new webpack.optimize.LimitChunkCountPlugin({
          maxChunks: 1
        })
      );
      config.plugins.push(
        new webpack.ProvidePlugin({
          QRCode: "qrcode", //忽略引入qrcode库
        }),
      )
    }
  }

添加 LimitChunkCountPlugin 插件，该插件限制输出的最大代码块数量：

  • maxChunks: 1：将输出的代码块数量限制为1。这通常用于将所有代码打包到一个文件中，减少网络请求次数。

打包文件前后对比

  • 未配置UglifyJsPlugin与 LimitChunkCountPlugin image.png

  • 成功配置UglifyJsPlugin与 LimitChunkCountPlugin

image.png

(2)配置指定的文件夹

可以手动修改src的文件夹

module.exports{
/修改src为examples
pages:{
index:{
    entry:examples/main.js',
    template:'public/index.html',
    filename:'index.html'
    }
}
}

(3)配置markdown文件(在组件项目中,可以以markdown的形式来写使用文档)

这段配置是对 Webpack 配置文件中模块规则的扩展，添加了两个新规则，一个用于处理 .mjs 文件，一个用于处理 .md 文件。下面是详细的解释：

配置解释

javascript
复制代码
config.module.rules.push({
  test: /.mjs$/,
  include: /node_modules/,
  type: 'javascript/auto'
),
test: /.md$/,
use:[
  {
    loader: 'vue-loader',
    options: {
      compilerOptions: {
        preserveWhitespace: false
      }
    }
  },
  {
    loader: path.resolve(__dirname, './build/md-loader/index.js')
  }
]
1. 处理 .mjs 文件
javascript
复制代码
{
  test: /.mjs$/,
  include: /node_modules/,
  type: 'javascript/auto'
}
  • test: /.mjs$/ : 这个正则表达式匹配所有扩展名为 .mjs 的文件。
  • include: /node_modules/ : 仅包括 node_modules 目录下的 .mjs 文件。
  • type: 'javascript/auto' : 将 .mjs 文件类型设置为 javascript/auto。这是为了确保 Webpack 正确处理这些文件，因为默认情况下，Webpack 可能会将 .mjs 文件视为 ES 模块，而 javascript/auto 类型允许 Webpack 按需动态决定如何处理这些文件。
2. 处理 .md 文件
javascript
复制代码
{
  test: /.md$/,
  use: [
    {
      loader: 'vue-loader',
      options: {
        compilerOptions: {
          preserveWhitespace: false
        }
      }
    },
    {
      loader: path.resolve(__dirname, './build/md-loader/index.js')
    }
  ]
}
  • test: /.md$/ : 这个正则表达式匹配所有扩展名为 .md（Markdown）的文件。
  • use: 指定用于处理 .md 文件的加载器列表。
加载器详细配置

  1. vue-loader:

    • loader: 'vue-loader' : 使用 vue-loader 处理 .md 文件，这意味着这些文件会被视为 Vue 组件。

    • options:

      • compilerOptions:

        • preserveWhitespace: false: 配置选项以删除模板中的空白字符，从而减少生成的 HTML 文件大小。

  2. 自定义 Markdown 加载器:

    • loader: path.resolve(__dirname, './build/md-loader/index.js') : 使用自定义的 Markdown 加载器，该加载器位于 ./build/md-loader/index.js。这个加载器可能会将 Markdown 转换为 Vue 组件或其他可用格式。

配置的作用

  1. 处理 .mjs 文件：

    • 由于部分第三方库可能使用 .mjs 文件格式，这段配置确保 Webpack 能够正确处理 node_modules 中的 .mjs 文件，而不会遇到解析错误。

  2. 处理 .md 文件：

    • 这段配置允许在项目中直接使用 Markdown 文件，将其转换为 Vue 组件。这对文档、博客文章或内容管理系统（CMS）非常有用，因为可以直接在 Vue 应用中使用 Markdown 格式的内容。

示例项目结构

假设你的项目结构如下：

css
复制代码
my-project/
├── build/
│   └── md-loader/
│       └── index.js
├── src/
│   ├── components/
│   │   └── MyMarkdownComponent.vue
│   └── content/
│       └── example.md
├── package.json
└── webpack.config.js

在这个项目中，你可以在 Vue 组件中导入和使用 Markdown 文件：

vue
复制代码
<template>
  <div>
    <MarkdownContent />
  </div>
</template>

<script>
import MarkdownContent from '../content/example.md';

export default {
  components: {
    MarkdownContent
  }
};
</script>

总结

这段 Webpack 配置的目的是确保正确处理 .mjs 文件，并将 .md 文件转换为 Vue 组件，从而可以在 Vue 应用中直接使用 Markdown 文件。通过使用 vue-loader 和自定义的 Markdown 加载器，可以灵活地管理和显示 Markdown 内容。

avatar
文章
阅读
粉丝