CopyWebpackPlugin 的使用方法记录

CopyWebpackPlugin 一个webpack插件

  1. 用来复制一个单独的文件或者整个目录到新建的文件夹下

  2. 通常用在我们打包的时候,将一些文件放到指定的文件夹下

安装命令

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

先检查自己的版本吧(我就被坑了╮(╯▽╰)╭)不同版本的文档不一样

在这里插入图片描述我这里是6.0.4版本的

文档地址
https://webpack.js.org/plugins/copy-webpack-plugin/

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

module.exports = {
  plugins: [
    new CopyPlugin({
      patterns: [
        { from: 'source', to: 'dest' },
        { from: 'other', to: 'public' },
      ],
    }),
  ],
};

我简单的示例

  new CopyWebpackPlugin(
      {
        patterns: [
          { from: 'F:\\canvas\\day02-canvas\\img\\clock.jpg' },
          // { from: 'other', to: 'public' },
        ],
      }),
  new CopyWebpackPlugin(
      {
        patterns: [
          { from: path.resolve(__dirname,'1.jpg') },
          // { from: 'other', to: 'public' },
        ],
      }),

4.xxx.xx版本的吧 做个记录

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

module.exports = {
    context: path.join(__dirname, 'app'),
    devServer: {
        // This is required for older versions of webpack-dev-server
        // if you use absolute 'to' paths. The path should be an
        // absolute path to your build destination.
        outputPath: path.join(__dirname, 'build')
    },
    plugins: [
        new CopyWebpackPlugin([
            // {output}/file.txt
            { from: 'from/file.txt' },

            // equivalent
            'from/file.txt',

            // {output}/to/file.txt
            { from: 'from/file.txt', to: 'to/file.txt' },

            // {output}/to/directory/file.txt
            { from: 'from/file.txt', to: 'to/directory' },

            // Copy directory contents to {output}/
            { from: 'from/directory' },

            // Copy directory contents to {output}/to/directory/
            { from: 'from/directory', to: 'to/directory' },

            // Copy glob results to /absolute/path/
            { from: 'from/directory/**/*', to: '/absolute/path' },

            // Copy glob results (with dot files) to /absolute/path/
            {
                from: {
                    glob:'from/directory/**/*',
                    dot: true
                },
                to: '/absolute/path'
            },

            // Copy glob results, relative to context
            {
                context: 'from/directory',
                from: '**/*',
                to: '/absolute/path'
            },

            // {output}/file/without/extension
            {
                from: 'path/to/file.txt',
                to: 'file/without/extension',
                toType: 'file'
            },

            // {output}/directory/with/extension.ext/file.txt
            {
                from: 'path/to/file.txt',
                to: 'directory/with/extension.ext',
                toType: 'dir'
            }
        ], {
            ignore: [
                // Doesn't copy any files with a txt extension    
                '*.txt',

                // Doesn't copy any file, even if they start with a dot
                '**/*',

                // Doesn't copy any file, except if they start with a dot
                { glob: '**/*', dot: false }
            ],

            // By default, we only copy modified files during
            // a watch or webpack-dev-server build. Setting this
            // to `true` copies all files.
            copyUnmodified: true
        })
    ]
};
### 保持Web前端项目结构或文件路径不变的操作 为了在Web前端开发过程中维持项目的目录结构和文件路径不发生改变,有几种方法可以实现这一目标: #### 利用构建工具配置忽略更改 许多现代的前端工作流依赖于像Webpack这样的模块捆绑器来处理资源。通过合理配置这些工具,可以在打包阶段指定哪些文件夹或文件应被保留原样而不做任何改动。例如,在Webpack中可以通过`copy-webpack-plugin`插件轻松复制整个静态资产目录至输出位置而无需变动其内部布局。 ```javascript const CopyWebpackPlugin = require('copy-webpack-plugin'); module.exports = { plugins: [ new CopyWebpackPlugin({ patterns: [{ from: 'src/assets', to: 'assets' }], }), ], }; ``` #### 设置服务器端路由规则 对于基于Node.js或其他后端技术栈的应用程序来说,调整Express等框架下的路由逻辑也是一种有效手段。确保所有请求都指向正确的物理路径下对应的文件,即使URL模式有所变化也不会影响实际访问地址。这通常涉及到定义通配符匹配以及重定向机制[^1]。 #### 应用版本控制系统策略 采用Git Hooks或者其他形式的钩子函数配合CI/CD流程能够防止意外提交破坏现有架构的行为。比如pre-commit hook可用于检查即将推送的内容是否存在违反既定标准的情况;而在持续集成环境中,则可利用Linters自动扫描并修复潜在问题以维护一致性的源码库状态。 #### 配置`.gitignore` 和 `.npmignore` 当共享代码仓库时,适当编辑这两个文件可以帮助排除不必要的本地临时文件、编译产物或是敏感信息进入远程分支里去,从而间接保护了整体文件系统的稳定性[^2]。 #### 实施严格的命名约定与文档化实践 最后但同样重要的是建立一套清晰易懂且易于遵循的名字空间划分原则,并将其记录下来供团队成员共同遵守。这样不仅有助于减少人为错误的发生概率,而且便于后期维护人员快速理解当前体系的设计意图。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值