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

Question

我需要将 webpack 输出与其他文件连接起来，例如 pre.js + bundle.js(the webpack output file) + after.js。我已经尝试过 webpack concat 插件并将 webpack 与 gulp 结合使用，但我只是不知道如何获取输出文件并将其通过管道传递给 concat 任务。这样做的目的是将输出包装在自定义库中。

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']
        })
    ]
};

这连接了已经构建的 bundle.js，而不是 webpack 开发服务器正在生成和更新的那个。

使用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");
     })
})

在第二种情况下，不确定如何在gulp中获取webpack输出。

Answer 1

您使用 gulp 只是为了运行 webpack-dev-server？这不是必需的：https://webpack.js.org/guides/development/#using-webpack-dev-server

在不知道pre.js和after.js的内容+目的的情况下，很难给出好的建议。您可能想要调整 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，或者通过三个后续导入 (import 'pre.js'; import 'bundle.js'; import 'after.js') 将树文件组合成一个新的条目文件。祝你好运。

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

Webpack concat output js file to wrap it in a library?

javascript

gulp

webpack

webpack-dev-server