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') }
      ]
    })
  ]
};
相关推荐
weixin-a153003083169 分钟前
vue疑难解答
前端·javascript·vue.js
Bellafu6663 小时前
selenium 常用xpath写法
前端·selenium·测试工具
blackorbird6 小时前
Edge 浏览器 IE 模式成攻击突破口:黑客借仿冒网站诱导攻击
前端·edge
谷歌开发者7 小时前
Web 开发指向标 | Chrome 开发者工具学习资源 (一)
前端·chrome·学习
名字越长技术越强7 小时前
Chrome和IE获取本机ip地址
前端
天***88967 小时前
Chrome 安装失败且提示“无可用的更新” 或 “与服务器的连接意外终止”,Chrome 离线版下载安装教程
前端·chrome
半梦半醒*7 小时前
zabbix安装
linux·运维·前端·网络·zabbix
清羽_ls7 小时前
React Hooks 核心规则&自定义 Hooks
前端·react.js·hooks
你的人类朋友7 小时前
“签名”这个概念是非对称加密独有的吗?
前端·后端·安全
西陵8 小时前
Nx带来极致的前端开发体验——任务缓存
前端·javascript·架构