2017-09-18 11 views
0

ウェブパックの出力をpre.js + bundle.js(the webpack output file) + after.jsのような他のファイルと連結する必要があります。私はwebpack concatプラグインを試してみたが、webpackとgulpを組み合わせても、出力ファイルを取得してconcatタスクにパイプラインする方法を理解できない。これの目的は、出力をカスタムライブラリにラップすることです。Webpack concatはjsファイルを出力してライブラリにラップしますか?

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

これは、既に生成され、WebPACKのdevのサーバーによって更新されています1、ないに構築されてされていますbundle.jsを連結します。一息使用

:後者の場合には

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

を、ゴクゴクにWebPACKの出力を取得する方法がわかりません。

答えて

0

gulpを使用してwebpack-dev-serverを実行していますか?これは必要ではありません。https://webpack.js.org/guides/development/#using-webpack-dev-server

pre.jsafter.jsのコンテンツ+目的を知らなくても、良いアドバイスをするのは難しいです。あなたは適応することがありますBannerPluginに出力することもフッター= after.js、または(その後最初dist/bundle.js、およびpre.js + dist/bundle.js + after.jsgenerate multiple targetsへのWebPACKを設定、またはvarious ways for shimmingをチェック、または3を経由して新しいエントリファイルにツリーファイルを結合その後の輸入(import 'pre.js'; import 'bundle.js'; import 'after.js')。がんばろう。

関連する問題