Javascript-форум (https://javascript.ru/forum/)
-   Сборка проекта, утилиты (https://javascript.ru/forum/server-tools/)
-   -   Gulp + Webpack, кэширование точек входа (https://javascript.ru/forum/server-tools/82533-gulp-webpack-kehshirovanie-tochek-vkhoda.html)

Vladikslav 21.05.2021 01:23

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-файлов, х.з.
Может кто-то заморачивался?

Kiano 25.05.2021 00:56

C webpack не работал, но что-то мне подсказывает что в 14 строке нужно более точное правило задать, там же указано, что все .js

Vladikslav 26.05.2021 13:46

Цитата:

Сообщение от Kiano (Сообщение 537113)
C webpack не работал, но что-то мне подсказывает что в 14 строке нужно более точное правило задать, там же указано, что все .js

Нет, это свойство output. Это совсем другое.

Цитата:

The top-level output key contains set of options instructing webpack on how and where it should output your bundles, assets and anything else you bundle or load with webpack.
output.auxiliaryComment
А вот по поводу filename: '[name].bundle.js' – https://webpack.js.org/configuration...outputfilename
Цитата:

...when creating multiple bundles via more than one entry point, code splitting, or various plugins, you should use one of the following substitutions to give each bundle a unique name...


Часовой пояс GMT +3, время: 23:47.