0

这是我的配置文件，它在所需的“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 --mode development 后，我​​没有在所需位置获得任何文件。

4

1 回答 1

2

这是 的正常行为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];
于 2018-04-02T15:45:15.420 回答