Question

这是我的配置文件，它正在捆绑并在所需的＆＃39; dist＆＃39;中生成构建文件。目录。但我想将它复制到其他位置。问题是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开发后，我没有在所需位置获取任何文件。

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,       
];

两种方式都是平等的。

<小时/> 的 PRACTIQUE

在你的情况下，应该是这样的：

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];

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

1 个答案: