webpack打包携带某个文件到dist目录

在 Webpack 配置文件 webpack.config.js 中,可以使用 CopyWebpackPlugin 插件实现将特定文件复制到dist目录;安装 CopyWebpackPlugin 插件;

bash 复制代码
npm install copy-webpack-plugin --save-dev

在 webpack.config.js 中引入 CopyWebpackPlugin 插件

javascript 复制代码
const CopyWebpackPlugin = require('copy-webpack-plugin');

在 Webpack 配置中,添加 CopyWebpackPlugin 插件的配置,指定要复制的文件和目标目录

javascript 复制代码
module.exports = {
  // 其他配置...
  plugins: [
    new CopyWebpackPlugin({
      patterns: [
        { from: 'path/to/your/file.txt', to: 'test' }
      ]
    })
  ]
};

将 'path/to/your/file.ext' 替换为要复制的文件的实际路径,将 to: 'test' 替换为希望文件复制到的目标目录;运行 Webpack 构建命令,Webpack 将会将指定文件复制到 dist 目录中 的 test 目录下;如果将 to: 'test' 替换为 to: '/' 将直接打包到dist下;

打包报错问题:

没有权限创建路径,使用 path 包解决;

javascript 复制代码
const path = require('path')

module.exports = {
  // 其他配置...
  plugins: [
    new CopyWebpackPlugin({
      patterns: [
        { from: 'path/to/your/file.txt', to: path.join(__dirname, './dist') }
      ]
    })
  ]
};
相关推荐
excel4 小时前
ES6 中函数的双重调用方式:fn() 与 fn\...``
前端
可乐爱宅着4 小时前
全栈框架next.js入手指南
前端·next.js
你的人类朋友5 小时前
什么是API签名?
前端·后端·安全
会豪7 小时前
Electron-Vite (一)快速构建桌面应用
前端
中微子7 小时前
React 执行阶段与渲染机制详解(基于 React 18+ 官方文档)
前端
唐某人丶7 小时前
教你如何用 JS 实现 Agent 系统(2)—— 开发 ReAct 版本的“深度搜索”
前端·人工智能·aigc
中微子7 小时前
深入剖析 useState产生的 setState的完整执行流程
前端
遂心_8 小时前
JavaScript 函数参数传递机制:一道经典面试题解析
前端·javascript
小徐_23338 小时前
uni-app vue3 也能使用 Echarts?Wot Starter 是这样做的!
前端·uni-app·echarts
RoyLin8 小时前
TypeScript设计模式:适配器模式
前端·后端·node.js