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

【问题标题】：Webpack concat output js file to wrap it in a library?Webpack concat 输出 js 文件以将其包装在库中？
【发布时间】：2017-09-18 16:01:19
【问题描述】：

我需要将 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 开发服务器生成和更新的bundle.js。

使用 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 输出。

【问题讨论】：

标签： javascript webpack gulp webpack-dev-server

【解决方案1】：

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

不知道pre.js和after.js的内容+目的，很难给出好的建议。您可能希望调整BannerPlugin 也输出一个footer=after.js，或者将webpack 配置为generate multiple targets（首先是dist/bundle.js，然后是pre.js+dist/bundle.js+after.js），或者检查various ways for shimming，或者通过三个后续导入 (import 'pre.js'; import 'bundle.js'; import 'after.js') 将树文件组合到一个新的条目文件。祝你好运。

【讨论】：