语言►nodejs►库►webpack

webpack中的copy-webpack-plugin

本文作者: jsweibo

本文链接: https://jsweibo.github.io/2019/07/03/webpack%E4%B8%AD%E7%9A%84copy-webpack-plugin/

摘要

本文主要讲述了：

  1. 作用
  2. 安装
  3. 配置

正文

作用

复制文件和目录

示例：

  • public/foo.jpg -> dist/foo.jpg
  • public/icons/bar.jpg -> dist/bar.jpg

learn_webpack/webpack.config.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
const path = require('path');
const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {
  mode: 'production',
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  plugins: [
    new CopyWebpackPlugin({
      patterns: [
        {
          from: 'public/foo.jpg',
        },
        {
          from: 'public/icons',
        },
      ],
    }),
  ],
};

示例：

  • public/foo.jpg -> dist/foo.jpg
  • public/icons/bar.jpg -> dist/icons/bar.jpg

learn_webpack/webpack.config.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
const path = require('path');
const CopyWebpackPlugin = require('copy-webpack-plugin');
module.exports = {
  mode: 'production',
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  plugins: [
    new CopyWebpackPlugin({
      patterns: [
        {
          from: 'public/foo.jpg',
        },
        {
          from: 'public/icons',
          to: 'icons',
        },
      ],
    }),
  ],
};

安装

1
2
3
#!/usr/bin/env bash

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

配置

from

源路径

相对于cofnig.context

to

目标路径

相对于cofnig.output.path

参考资料

本文作者: jsweibo

本文链接: https://jsweibo.github.io/2019/07/03/webpack%E4%B8%AD%E7%9A%84copy-webpack-plugin/

本文对你有帮助？请支持我

支付宝
微信