Допустим, я не хочу чтобы весь мой 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/',
}]
},
}
}