ウェブパックの出力を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の出力を取得する方法がわかりません。