Настройка webpack


#1

Всем привет.

Не подскажите как настроить webpack так, что бы он не транслировал все добавленные модули в один bundle?

У меня есть три общих модуля, они подключаются на 10-ти страницах. ( т.е на каждой странице модуль страницы + 3-ри общих, подключенные через import) . Если я изменяю общий модуль. мне приходиться пересобирать все 10 страниц. Мне бы хотелось от этого отказаться))

кто нибудь знает как это сделать?
может у кого нибудь есть пример конфига с описанием?

я почитал https://webpack.js.org/plugins/split-chunks-plugin/#splitchunks-cachegroups-cachegroup-reuseexistingchunk

попробовал, но ничего не получилось)

пример конфига

const path = require('path');
const { lstatSync, readdirSync } = require('fs');
const { resolve } = require('path');
const webpack = require('webpack');

const root = path.join(__dirname, 'emc/webpack');
const appsPath = 'src/apps';
const appsDist = './apps/';
const specificDir = typeof process.env.app !== "undefined" ? path.join(appsPath, process.env.app) : null;
const src = specificDir ? path.join(root, specificDir) : path.join(root, appsPath);

module.exports = [];
const generateExports = (dir, entryList) => {
  let files = readdirSync(dir);
  files.forEach(function(file) {
    if (lstatSync(path.join(dir, file)).isDirectory()) {
      entryList = generateExports(path.join(dir, file), entryList);
    }
    if (file === "index.js") {
      let entryPath = dir.split('apps', 2)[1];
      module.exports.push({
        entry: {
          bundle: `${dir}/index.js`
        },
        output: {
          publicPath: `/emc/webpack/dist/apps${entryPath}/`,
          path: resolve(root, `dist/apps/${entryPath}`),
          filename: '[name].js'
        },

        module: {
          rules: [
            {
              test: /\.js$/,
              exclude: /node_modules/,
              loader: 'babel-loader',
              options: {
                presets: ['env', 'react', 'stage-1'],
              },
            }, {
              test: /\.css$/,
              loaders: ['style-loader', 'css-loader']
            }, {
              test: /\.(png|jpg|gif)$/,
              loader: 'file-loader',
              options: {
                name: './assets/images/[name].[ext]',
              }
            }
          ],
        },

        resolve: {
          alias: {
            core: resolve(root, './src/core'),
            modules: path.resolve(root, 'src/modules'),
            common: path.resolve(root, 'src/common'),
            oldModules: path.resolve(root, 'src/oldModules')
          }
        },

        devServer: {
          contentBase: resolve(root, 'dist'),
          publicPath: '/',
          hot: true,
        },

        performance: {
          maxEntrypointSize: 512000,
          maxAssetSize: 512000
        },

        optimization: {
          minimize: false,
          splitChunks: {
            cacheGroups: {
              default: false,
              vendors: false,

              common: {
                name: 'common',
                minChunks: 2,
                chunks: 'async',
                priority: 10,
                reuseExistingChunk: true,
                enforce: true
              },

              vendor: {
                chunks: 'all',
                test: /node_modules/
              }
            }
          }
        },

        plugins: [
          new webpack.ProvidePlugin({
            _: 'underscore'
          })
        ]
      });
    }
  });
};

generateExports(src);

#2

Я верно понимаю что этот конфиг генерирует 10 конфигов для каждой страницы и нужно вынести в общий chunk код, который общий для этих 10 страниц?


#3

Да, я указываю название страницы при трансляции “npm run build:название страницы” и у меня создается в нужной папке нужный bundle.

Нужно что бы при изменении одного общего модуля, не нужно было все остальные модули ( где общий добавлен) заново транслировать.

Как я понимаю нужно загружать несколько бандлов на одну страницу, но если это делаешь, то webpack ругается

TypeError: Cannot read property ‘call’ of undefined


#4

сode splitting будет работать с несколькими бандлами если в 1 конфигурации настроить несколько entry points и соответственно несколько атпутов для этих бандлов. Возможно ли это сделать так чтобы сохранить текущий сетап - не знаю.


#5

Спасибо, сейчас копну в эту сторону.