javascript copy-webpack-plugin不复制文件

zujrkrfu 于 2023-04-28 发布在 Java

关注(0)|答案(3)|浏览(223)

我尝试只复制文件来检查简单的webpack配置。所以我坚持尝试让copy-webpack-plugin工作-什么也没有发生：没有复制的文件，没有错误，什么都没有
公共配置（webpack.common.js）：

const path = require('path');

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

const postCssPlugin = [
  require('postcss-import'),
  require('postcss-nested'),
  require('postcss-simple-vars'),
  require('autoprefixer')({
    browsers: [
      'last 3 versions',
      'android 4.2'
    ]
  })
];

module.exports = {
  context: path.resolve(__dirname, '../src'),
  entry: [
    'babel-polyfill',
    path.resolve(__dirname, '../src/index.js')
  ],
  output: {
    path: path.resolve(__dirname, '../dist/js'),
    publicPath: '',
    filename: 'app.js'
  },
  resolve: {
    extensions: ['.jsx', '.js', '.json']
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        loader: 'babel-loader'
      },
      {
        test: /\.p?css$/,
        use: [
          'style-loader',
          'css-loader',
          {
            loader: 'postcss-loader',
            options: {
              ident: 'postcss',
              plugins: postCssPlugin
            }
          }
        ]
      }
    ]
  },
  plugins: [
    new CopyWebpackPlugin([
      {
        from: path.resolve(__dirname, '../src/assets/**/*'),
        to: path.resolve(__dirname, '../dist/assets'),
        flatten: true
      }
    ])
  ],
  stats: {
    modules: true,
    warnings: false,
    version: true,
    timings: true,
    performance: false,
    hash: true,
    errors: true,
    errorDetails: true,
    colors: true,
    builtAt: true
  }
};

webpack.prod.js:

const commonWebpackConfig = require('./webpack.common.js');

const UglifyJsWebpackPlugin = require('uglifyjs-webpack-plugin');

module.exports = Object.assign(commonWebpackConfig, {
  mode: 'production',
  plugins: [
    new UglifyJsWebpackPlugin({
      sourceMap: true
    })
  ]
});

并生成启动文件生成。js：

const webpack = require('webpack');

const webpackProdConfig = require('./webpack.config/webpack.prod.js');

webpack(webpackProdConfig, (err, stats) => {
  if (err || stats.hasErrors()) {
    console.error(err.stack || err);
  }

  console.log('Successfully compiled!');
});

那么，有没有人能弄清楚为什么它不起作用，我错在哪里？copy-webpack-plugin：4.5.2节点：9.1.0 npm：6。3.0窗口：10
添加-文件夹结构：

JavaScript

来源：https://stackoverflow.com/questions/52478834/copy-webpack-plugin-doesnt-copy-files

3条答案

按热度按时间

hof1towb1#

尝试从dist文件夹复制。对我来说，它工作了。

new CopywebpackPlugin([{
    from: path.resolve(__dirname, 'node_modules/mettrr-component-library/dist/img'),
    to: path.resolve(__dirname, 'src/assets/img')
}]),

赞(0）回复(0）举报 2023-04-28

eulz3vhy2#

我花了三天时间在这上面。如果你使用的是webpack 5，你可能只需要打开writeToDisk。

{
  devServer: {
   devMiddleware: { writeToDisk: true }
  }
}

赞(0）回复(0）举报 2023-04-28

nx7onnlm3#

在这个特定的示例中，是Object.assign()导致了配置问题。
Object.assign()将属性从源复制到目标，但不合并数组或对象。
因此，您的原始配置相当于编写以下代码：

const commonWebpackConfig = require('./webpack.common.js');

const UglifyJsWebpackPlugin = require('uglifyjs-webpack-plugin');

const productionConfig = {
  mode: 'production',
  plugins: [
    new UglifyJsWebpackPlugin({
      sourceMap: true
    })
  ]
};

// This is the equivalent of what `Object.assign()` is doing in your original code
commonWebpackConfig.mode = productionConfig.mode;
commonWebpackConfig.plugins = productionConfig.plugins; // oops, this replaces the previous `plugins` list

module.exports = commonWebpackConfig;

通过这个重写的代码，你可以看到plugins数组没有被合并（它被替换了），这就是为什么CopyWebpackPlugin不工作，它不存在于你的最终配置中。
使用较新的JavaScript代码，如... spread syntax，可以手动合并配置。
这允许您合并两个plugins阵列并获得一个工作配置：

const commonWebpackConfig = require('./webpack.common.js');

const UglifyJsWebpackPlugin = require('uglifyjs-webpack-plugin');

module.exports = {
  ...commonWebpackConfig,
  mode: 'production',
  plugins: [
    ...commonWebpackConfig.plugins,
    new UglifyJsWebpackPlugin({
      sourceMap: true
    }),
  ]
});

赞(0）回复(0）举报 2023-04-28

我来回答

javascript copy-webpack-plugin不复制文件

3条答案

相关问题

热门标签

最新问答