Web-Pack 4.0:构建后无法复制文件

Question

这是我的配置文件，它在所需的'Dist'目录中捆绑并生成构建文件。但是我想将其复制到其他位置。问题在于，CopyWebpackPlugin在构建完成之前正在较早运行。

const CleanWebpackPlugin = require('clean-webpack-plugin');
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const buildAssets= require('./frontEndBuildAssets');
const CopyWebpackPlugin = require('copy-webpack-plugin')

var vendorJsFiles = buildAssets.buildConfig.vendorJs;
var frontEndStyles = buildAssets.buildConfig.frontEndStyles;
var customJsFiles = buildAssets.buildConfig.customJSFiles;

let pathsToClean = [
    'dist/assets'
]

const frontEndBuildConfig = {
    entry: {'vendorJs':vendorJsFiles,'customJs':customJsFiles,'frontEndStyles':frontEndStyles},
    output: {
        path: __dirname + '/dist/assets',
        filename: '[name]Bundle.js',
        publicPath: ''
    },
    module: {
        rules: [
            {
                test: /.css$/,
                    exclude: path.resolve(__dirname, 'node_modules'),
                use: ExtractTextPlugin.extract({
                    fallback: "style-loader",
                    use: [
                        { loader: 'css-loader?sourceMap!sass-loader?sourceMap!', options: { minimize: true,sourceMap: true} }
                    ]
                }),
            },
            {
                test: /.(woff(2)?|ttf|eot|svg)(?v=d+.d+.d+)?$/,
                use: [{
                    loader: 'file-loader',
                    options: {
                        name: '[name].[ext]',
                        outputPath: './fonts'
                    }
                }]
            },
            {
                test: /.(png|jpg|gif)$/,
                use: [
                    {
                        loader: 'file-loader',
                    }
                ]
            }
        ]
    },
    plugins: [
        new CleanWebpackPlugin(pathsToClean),
        new HtmlWebpackPlugin({
            template: './src/indexTemplate.html',
            inject: true,
            filename: 'index.html'
         }),
        new UglifyJsPlugin({
            uglifyOptions: {
                exclude: /(costing)/,
                output: {
                    comments: false,
                    beautify: true
                },
                compress: {},
            }
        }),
        new ExtractTextPlugin('frontEndStylesBundle.css'),
            new CopyWebpackPlugin([{ from: path.resolve(__dirname,'import/importFromExcel.html'),
                to:path.resolve(__dirname,'costing/assets/')}])
    ]
};

 module.exports = [frontEndBuildConfig];

运行WebPack - 模式开发后，我在所需的位置没有收到任何文件。

Answer 1

这是CopyWebpackPlugin的正常行为。它复制了较早的webpack运行，而不是之后，因此您必须搜索其他方法才能实现此目的。

理论

为了解决您的问题，您可以做两件事：

• 导出一个配置数组：

  module.exports = [
  {
      name: "mobile",
      // mode: "development || "production",
      entry: "./example",
      output: {
          path: path.join(__dirname, "dist"),
          filename: "mobile.js"
      },
      plugins: [
          new webpack.DefinePlugin({
              ENV: JSON.stringify("mobile")
          })
      ]
  },
  {
      name: "desktop",
      // mode: "development || "production",
      entry: "./example",
      output: {
          path: path.join(__dirname, "dist"),
          filename: "desktop.js"
      },
      plugins: [
          new webpack.DefinePlugin({
              ENV: JSON.stringify("desktop")
          })
      ]
  }
  ];
  

• 或创建一个共同的配置并也创建两个独立的配置(一个用于每个输出(，然后导出它们

  var config = {
      // TODO: Add common Configuration
      module: {},
  };
  var fooConfig = Object.assign({}, config, {
      name: "a",
      entry: "./a/app",
      output: {
         path: "./a",
         filename: "bundle.js"
      },
  });
  var barConfig = Object.assign({}, config,{
      name: "b",
      entry: "./b/app",
      output: {
         path: "./b",
         filename: "bundle.js"
      },
  });
  // Return Array of Configurations
  module.exports = [
      fooConfig, barConfig,       
  ];
  

两种方式相等。

---

实践

在您的情况下，应该是：

const CleanWebpackPlugin = require('clean-webpack-plugin');
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const buildAssets= require('./frontEndBuildAssets');
const CopyWebpackPlugin = require('copy-webpack-plugin')

var vendorJsFiles = buildAssets.buildConfig.vendorJs;
var frontEndStyles = buildAssets.buildConfig.frontEndStyles;
var customJsFiles = buildAssets.buildConfig.customJSFiles;

let pathsToClean = [
    'dist/assets'
]

const frontEndBuildConfig = {
    entry:   {'vendorJs':vendorJsFiles,'customJs':customJsFiles,'frontEndStyles':frontEndStyles},
    module: {
        rules: [
            {
                test: /.css$/,
                    exclude: path.resolve(__dirname, 'node_modules'),
                use: ExtractTextPlugin.extract({
                    fallback: "style-loader",
                    use: [
                        { loader: 'css-loader?sourceMap!sass-loader?sourceMap!', options: { minimize: true,sourceMap: true} }
                    ]
                }),
            },
            {
                test: /.(woff(2)?|ttf|eot|svg)(?v=d+.d+.d+)?$/,
                use: [{
                    loader: 'file-loader',
                   options: {
                        name: '[name].[ext]',
                        outputPath: './fonts'
                    }
                }]
            },
            {
                test: /.(png|jpg|gif)$/,
                use: [
                    {
                        loader: 'file-loader',
                    }
                ]
            }
        ]
    },
    plugins: [
        new CleanWebpackPlugin(pathsToClean),
        new HtmlWebpackPlugin({
            template: './src/indexTemplate.html',
            inject: true,
            filename: 'index.html'
         }),
        new UglifyJsPlugin({
            uglifyOptions: {
                exclude: /(costing)/,
                output: {
                    comments: false,
                    beautify: true
                },
                compress: {},
            }
        }),
        new ExtractTextPlugin('frontEndStylesBundle.css'),
        new CopyWebpackPlugin([{ from: path.resolve(__dirname,'import/importFromExcel.html'),
            to:path.resolve(__dirname,'costing/assets/')}])
    ]
};
const outputOne = Object.assign({}, frontEndBuildConfig, {
    output: {
        path: __dirname + '/dist/assets',
        filename: '[name]Bundle.js',
        publicPath: ''
    },
});
const outputTwo = Object.assign({}, frontEndBuildConfig, {
    output: {
        path: __dirname + '/dist/otherAssetsFromOutputTwo',
        filename: '[name]Bundle.js',
        publicPath: ''
    },
});
 module.exports = [outputOne, outputTwo];