使用 webpack 将 dist 复制到 libs 目录答案

【问题标题】：Copy dist to libs directory with web pack使用 webpack 将 dist 复制到 libs 目录
【发布时间】：2019-11-12 06:40:24
【问题描述】：

我想做以下事情：

使用 gulp，我将其添加到我的任务中：

gulp.task('copy:libs', function() {
  return gulp
    .src(npmdist(), { base: paths.base.node.dir })
    .pipe(gulp.dest(paths.dist.libs.dir));
});

这将我的包从 node_modules 复制到我的 libs 目录。现在我想用 webpack 做同样的事情：

来源：node_modules/@fancyapps/fancybox/dist/jquery.fancybox.min.css
目标：lib/css/fancybox/jquery.fancybox.min.css

和

来源：node_modules/@fancyapps/fancybox/dist/jquery.fancybox.min.js
目标：lib/js/fancybox/jquery.fancybox.min.js

不幸的是，我还没有找到使用 WebpackCopy 执行此操作的可能性。

【问题讨论】：

标签： javascript node.js laravel webpack

【解决方案1】：

您可以使用 copy-webpack-plugin 来执行此操作。

运行

npm i copy-webpack-plugin

然后在你的 webpack 配置文件中

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

module.exports = {
  plugins: [
    new CopyWebpackPlugin([{
      from: 'node_modules/something',
      to: 'somefolder',
    }]),
  ]
}

【讨论】：

【解决方案2】：

仅供参考，如果您使用Laravel Mix，您可以使用mix.copy。

例如

mix.copy('node_modules/@fancyapps/fancybox/dist/jquery.fancybox.min.css', 'lib/css/fancybox/jquery.fancybox.min.css');

或者如果你想复制一个目录

mix.copyDirectory('node_modules/@fancyapps/fancybox/dist', 'lib/css/fancybox');

【讨论】：