使用自定义命令运行 webpack

Question

有没有办法运行 webpack 以不同的方式构建文件。我的意思是，例如我的目录：

src/
   A/
    css/
    js/
      index.js
   B/
    css/
    js/
      index.js
dist/
   A/
    bundle.js
   B/
    bundle.js

有没有这样的方法来配置 webpack 并发出像 webpack A 这样的命令来仅构建 A 文件并将其输出到 dist/A 和 webpack B 以构建 B 文件。这就像gulp.task 方式。

Answer 1

在你的 webpack 配置中，你可以使用名称 bundler 标签[name]:

entry: {
    a: [
       path.resolve(__dirname, './a/js/index')
    ],
    b: [
       path.resolve(__dirname, './b/js/index')
    ]
},
target: 'web',
output: {
    path: __dirname + '/dist/[name]',
    publicPath: '/',
    filename: '[name].bundle.js'
},

您可以拆分配置，因此您可以：

webpack.a.config.js：

entry: {
    a: [
       path.resolve(__dirname, './a/js/index')
    ]
},
target: 'web',
output: {
    path: __dirname + '/dist/[name]',
    publicPath: '/',
    filename: '[name].bundle.js'
},

和

webpack.b.config.js：

entry: {
    b: [
       path.resolve(__dirname, './b/js/index')
    ]
},
target: 'web',
output: {
    path: __dirname + '/dist/[name]',
    publicPath: '/',
    filename: '[name].bundle.js'
},

在你的 gulp 文件中你可以这样做：

var gulp = require('gulp');
var webpack = require('webpack-stream');

gulp.task('build:a', function() {
    return gulp.src('src/entry.js')
               .pipe(webpack( require('./webpack.a.config.js') ))
               .pipe(gulp.dest('dist/a/'));
});

gulp.task('build:b', function() {
    return gulp.src('src/entry.js')
               .pipe(webpack( require('./webpack.b.config.js') ))
               .pipe(gulp.dest('dist/b/'));
});

取自usage with gulp

你应该能够运行：

gulp build:a
gulp build:b

分享 webpack 配置

要共享配置，您将成为 webpack.base.config.js 和另外两个 js。

然后你可以做一个简单的Object.assign 将它们合并到 gulp 中：

var gulp = require('gulp');
var webpack = require('webpack-stream');

var a = require('./webpack.a.config.js');
var b = require('./webpack.b.config.js');
var base = require('./webpack.base.config.js');

gulp.task('build:a', function() {
    var fullConfig = Object.assign({}, base, a);

    return gulp.src('src/entry.js')
               .pipe(webpack(fullConfig))
               .pipe(gulp.dest('dist/a/'));
});

gulp.task('build:b', function() {
    var fullConfig = Object.assign({}, base, b);

    return gulp.src('src/entry.js')
               .pipe(webpack(fullConfig ))
               .pipe(gulp.dest('dist/b/'));
});