@wOneBvll

Как задать config webpack чтобы он выводил несколько js файлов?

Допустим, я не хочу чтобы весь мой javascript собирался в один bungle.js, хочу сделть чтобы для каждой страницы был свой файл скриптов:
**build**
  js  
    home.js
    about.js
    contacts.js
  home.html
  about.html
  contacts.html
**src** 
  js 
    modules 
      _header.js 
      _modals.js 
      _jquery.js 
    home.js
    about.js
    contacts.js
  home.html
  about.html
  contacts.html

Тоесть я хочу, чтобы webpack собирал несколько файлов, в папку build попадали только файлы без "_", и главное, чтобы не пришлось прописывать вручную все точки входа. Webpack должен сам это понимать
Прикол в том, что webpack(обрабатывает только js) у меня интегрирован в gulp(img, fonts, scss, pug)
Вот сборка:
// gulpfile.js
const gulp = require('gulp'),
      webpack = require('webpack'),
      webpack_stream = require('webpack-stream'),
      webpack_config = require('./webpack.config');
let path = {
  build: {
    fonts: 'build/fonts/',
    img: 'build/img/',
    css: 'build/css/',
    js: 'build/js/',
    html: 'build/',
  },
  src: {
    fonts: 'src/fonts/**/*',
    img: 'src/img/**/*.{jpg,png,svg,gif,ico,webp}',
    css: ['src/scss/**/*.scss', '!src/scss/**/_*.scss'],
    js: ['src/js/**/*.js', '!src/js/**/_*.js'],
    html: ['src/pug/**/*.pug', '!src/**/_*.pug', ]
  },
  watch: {
    fonts: 'src/fonts/**/*',
    img: 'src/img/**/*',
    css: 'src/scss/**/*',
    js: 'src/js/**/*',
    html: 'src/pug/**/*',
  },
}
function js() {
  return gulp.src(path.src.js)
    .pipe(sourcemaps.init())
    .pipe(webpack_stream(webpack_config, webpack))
    .pipe(sourcemaps.write())
    //.pipe(rename({ suffix: '.min' }))
    .pipe(gulp.dest(path.build.js))
    .pipe(browsersync.stream())

// webpack.config.js
module.exports = {
  output: {
    filename: '??????????' // вопрос тут
  },
  module: {
    rules: [{
      test: /\.(js)$/,
      loader: 'babel-loader',
      exclude: '/node_modules/',
    }]
  },
}
}
  • Вопрос задан
  • 1013 просмотров
Решения вопроса 1
@blolg
Можно например вот так
const path = require('path');
const glob = require('glob');

module.exports = {
    entry: toObject(glob.sync('./src/*.js')),
    output: {
        filename: '[name].js'
    }
};

function toObject(paths) {
    const entry = {};
    paths.forEach(function(p) {
        const name = path.basename(p, '.js');
        entry[name] = p;
    });
    return entry;
}


Т.е. в entry передавать объект
{
 page1: './src/page1.js',
 page2: './src/page2.js',
 ...
}
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы