快捷導(dǎo)航

vue-cli5.0?webpack?采用?copy-webpack-plugin?打包復(fù)制文件的方法

更新時(shí)間：2022年06月22日 09:42:27 作者：Gaby

今天就好好說(shuō)說(shuō)vue-cli5.0種使用copy-webpack-plugin插件該如何配置的問(wèn)題。這里我們安裝的 copy-webpack-plugin 的版本是 ^11.0.0，感興趣的朋友一起看看吧

目前 vue-cli已經(jīng)發(fā)布5.0了，webpack 配置上也與之前老版本的有所不同，調(diào)整 webpack 配置最簡(jiǎn)單的方式就是在 vue.config.js 中的對(duì)象中進(jìn)行配置，該對(duì)象將會(huì)被 webpack-merge 合并入最終的 webpack 配置。

有些 webpack 選項(xiàng)是基于 vue.config.js 中的值設(shè)置的，所以不能直接修改。例如你應(yīng)該修改 vue.config.js 中的 outputDir 選項(xiàng)而不是修改 output.path；你應(yīng)該修改 vue.config.js 中的 publicPath 選項(xiàng)而不是修改 output.publicPath。這樣做是因?yàn)?nbsp;vue.config.js 中的值會(huì)被用在配置里的多個(gè)地方，以確保所有的部分都能正常工作在一起。

vue-cli參考文檔：vue-cli 文檔指南

碰巧項(xiàng)目中打包的時(shí)候要復(fù)制一個(gè)文件夾及其下面的文件到打包文件夾 dist 下，下意識(shí)的就想起來(lái)copy-webpack-plugin這個(gè)插件，但是以前都是直接在 webpack的配置文件中直接配置，但現(xiàn)在 vue-cli5，在項(xiàng)目中找不到這個(gè)文件了，那該如何配置呢。

今天就好好說(shuō)說(shuō)vue-cli5.0種使用copy-webpack-plugin插件該如何配置的問(wèn)題。這里我們安裝的 copy-webpack-plugin 的版本是 ^11.0.0

安裝 copy-webpack-plugin :

yarn add copy-webpack-plugin -D

根據(jù)官網(wǎng)說(shuō)明，配置文件從之前的 webpack 配置文件，改成了在 vue.config.js 中進(jìn)行配置，將 vue.config.js 中項(xiàng)目生成的內(nèi)容注釋掉，改成以下代碼片段改寫就可以使用了。這里我們是將根目錄下的 static 文件復(fù)制到打包生成的 dist 目錄下。

注意這里，如果使用to參數(shù)的話默認(rèn)是dist目錄下進(jìn)行復(fù)制, 所填字段為目路地址

// const { defineConfig } = require('@vue/cli-service');
// module.exports = defineConfig({
//   transpileDependencies: true
// });

const path = require('path');

module.exports = {
  chainWebpack: config => {
    config.plugin('copy').use(require('copy-webpack-plugin'), [
      {
        patterns: [
          {
            from: path.resolve(__dirname, './static'),
            to: path.resolve(__dirname, './dist/static')
          }
        ]
      }
    ]);
  }
};

這里做下記錄，方便有需要的小伙伴取用~

到此這篇關(guān)于vue-cli5.0 webpack 采用 copy-webpack-plugin 打包復(fù)制文件的文章就介紹到這了,更多相關(guān)vue copy-webpack-plugin 打包復(fù)制文件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: