Показать сообщение отдельно
  #1 (permalink)  
Старый 21.05.2021, 01:23
Новичок на форуме
Отправить личное сообщение для Vladikslav Посмотреть профиль Найти все сообщения от Vladikslav
 
Регистрация: 10.05.2013
Сообщений: 9

Gulp + Webpack, кэширование точек входа
Прикрутил к галпу webpack через webpack-stream.
Всё работает, однако при изменении одного js-файла билдятся все.
В общем, я написал вот такую вот функцию для таска:

const devMode = true,
    prodMode = !devMode;
const path.src.js = ['./assets/src/js/main.js', './assets/src/js/rest.js'];
/* ... */
const cached = require('gulp-cached');
const webpackStream = require('webpack-stream');
const TerserPlugin = require("terser-webpack-plugin");
/* ... */
function js_build() {

    let webpackConf = {
        mode: `${(devMode === true) ? 'development' : 'production'}`, // current mode for webpack
        output: {
            filename: `[name].js`,  // the same name as the source
            sourceMapFilename: '[name].map'
        },
        module: {
            rules: [
                {
                    test: /\.(js)$/,    // get all js-files
                    exclude: /(node_modules)/, // exclude development modules folder
                    loader: 'babel-loader', // convert ES6 into a backwards compatible version of JS in older browsers
                    query: {
                        presets: ['@babel/env'] // use babel preset
                    }
                },
            ]
        },
        optimization: {
            minimize: true,
            minimizer: [new TerserPlugin()],
        }
    };

    // convert config array into entry property for Webpack
    let fileName = null;
    let entryObj = {};
    path.src.js.map((filePath) => {
      fileName = filePath.split('/').pop().split('.').slice(0, -1).join('.');
      entryObj[fileName] = filePath;
    });

    // add converted entry property to Webpack    
    webpackConf.entry = entryObj;
    // cache the generated webpack modules and chunks to improve build speed
    webpackConf.cache = (devMode === true) ? true : false;

    return gulp.src(path.src.js)
        .pipe(cached('js_building'))
        .pipe(webpackStream(webpackConf)).on('error', function handleError() {
            this.emit('end')
        })
        .pipe(gulp.dest(path.build.js))  // build js
        .pipe(rename({ suffix: '.min' })) // add suffix to the filename
        .pipe(gulp.dest(path.build.js)) // build final min js
        .pipe(browserSync.reload({ stream: true })); // browser-sync reload
}
exports.js_build = js_build;


В общем, как сделать так, чтобы при внесении измений в файл конкретной точки входа, к примеру, в файл './assets/src/js/rest.js', билдился только этот аутпут?!
Из примера видно, что если прописать в конфиге вебпака свойство cache: true, то всё равно билдятся все файлы!
Может быть плагин 'gulp-cached' нужно как-то прикрутить к перебираемому массиву js-файлов, х.з.
Может кто-то заморачивался?
Ответить с цитированием