Vue-cli5.0 Webpack使用 Copy-Webpack-Plugin 打包复制文件详解

2023-10-07 16:52:17

前言

随着 Vue.js 的不断发展，其官方脚手架工具 Vue-cli 也随之更新迭代，目前最新的版本已经来到了 5.0。在 Vue-cli5.0 中，webpack 的配置与之前的老版本有所不同，本文将主要介绍如何在 Vue-cli5.0 中使用 Copy-Webpack-Plugin 插件来打包和复制文件。

什么是 Copy-Webpack-Plugin

Copy-Webpack-Plugin 是一个 webpack 插件，可以将文件从一个地方复制到另一个地方。它可以用于复制静态资源、字体文件、图像文件等各种类型的文件。

安装 Copy-Webpack-Plugin

要使用 Copy-Webpack-Plugin，首先需要将其安装到项目中。可以使用以下命令进行安装：

npm install copy-webpack-plugin --save-dev

配置 Copy-Webpack-Plugin

安装完成之后，就可以在 webpack 配置文件中配置 Copy-Webpack-Plugin。在 Vue-cli5.0 中，webpack 的配置文件位于 config/index.js 文件。

const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {
  // ...其他配置
  plugins: [
    new CopyWebpackPlugin({
      patterns: [
        {
          from: 'src/assets',
          to: 'dist/assets'
        }
      ]
    })
  ]
};