Webpack concat输出js文件以将其包装在库中？

Question

I need to concat a webpack output with other files, like pre.js + bundle.js(the webpack output file) + after.js . I've tried the webpack concat plugin and also combining webpack with gulp, but I just can't figure out how to get the output file and pipeline it to concat task. The purpose of this is to wrap the output in a custom library.

webpack.config.js :

module.exports = {
    context: path.resolve(__dirname, 'src'),
    entry: './app.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    module: {
        rules: [{
            test: /\.js$/,
            include: path.resolve(__dirname, 'src'),
            use: [{
                loader: 'babel-loader',
                options: {
                    presets: [
                        ['es2015', {modules: false}]
                    ]
                }
            }]
        }
    ]},
     plugins: [
        new ConcatPlugin({
            useHash: true,
            sourceMap: true,
            name: 'flxeible',
            fileName: '[name].bundle.js',
            filesToConcat: ['pre.js','dist/bundle.js','after.js']
        })
    ]
};

This concatenates the bundle.js that's been already been built, not the one that's being generated and updated by the webpack dev server.

using gulp :

var gulp = require('gulp');
var gutil = require('gulp-util')
var webpack = require('webpack');
var WebpackDevServer = require('webpack-dev-server')
var webpackConfig = require('./webpack.config.js')

gulp.task('default', [ "webpack-dev-server"])

var myDevConfig = Object.create(webpackConfig);

gulp.task("webpack-dev-server", function(callback){

    new WebpackDevServer(webpack(myDevConfig), {
        stats: {
            colors: true
        }
    }).listen(8080, "localhost", function(err){
         if(err) throw new gutil.PluginError("webpack-dev-server", err);
         gutil.log("[webpack-dev-server]", 
         "http://localhost:8080/webpack-dev-server/index.html");
     })
})

in the second case, not sure how to get the webpack output in gulp.

Answer 1

You're using gulp solely to run the webpack-dev-server ? This is not necessary: https://webpack.js.org/guides/development/#using-webpack-dev-server

Without knowing the content+purpose of pre.js and after.js , it's hard to give good advice. You might want to adapt the BannerPlugin to also output a footer= after.js , or configure webpack to generate multiple targets (first dist/bundle.js , and pre.js + dist/bundle.js + after.js afterwards), or check the various ways for shimming , or combine the tree files to a new entry file via three subsequent imports ( import 'pre.js'; import 'bundle.js'; import 'after.js' ). Good luck.