Задать вопрос

Антон M

Junior front-end developer
Ответы пользователя по тегу Webpack

  • Webpack 5 как настроить правильную сборку изображений?

    @Bluorenge
    Junior front-end developer
    Чтобы настроить путь для разного вида ассетов (например, ещё для шрифтов), нужно добавить в rules тип 'asset/resource':
    {
    test: /\.(gif|png|jpe?g|svg)$/i,
    type: 'asset/resource',
},
{
    test: /\.(ttf|eot|woff2?)$/i,
    type: 'asset/resource',
},

    А в output добавить поле assetModuleFilename с функцией. В таком случае, все асcеты будут сохранятся по тому же пути, что и в папке src:
    output: {
    ...
    assetModuleFilename: pathData => {
        const filepath = path.dirname(pathData.filename).split('/').slice(1).join('/');
        return `${filepath}/[name][ext]`;
    },
},
    Ответ написан
    2 комментария
    2 комментария

  • Как транспилировать через babel код библиотеки из node_modules?

    @Bluorenge Автор вопроса
    Junior front-end developer
    Здесь много ответов на этот вопрос
    Мне больше всего понравилось такое решение:
    function excludeNodeModulesExcept(modules) {
  var pathSep = path.sep
  if (pathSep == '\\')
    pathSep = '\\\\'
  var moduleRegExps = modules.map(function (modName) {
    return new RegExp('node_modules' + pathSep + modName)
  })

  return function (modulePath) {
    if (/node_modules/.test(modulePath)) {
      for (var i = 0; i < moduleRegExps.length; i++)
        if (moduleRegExps[i].test(modulePath)) return false
      return true
    }
    return false
  }
}

    А потом в правилах:
    rules: [
      {
        test: /\.js$/,
        // Сюда передаём название нужного модуля.
        exclude: excludeNodeModulesExcept(['your_module']),
        use: {
          loader: `babel-loader`,
        },
      },
]
    Ответ написан
    Комментировать
    Комментировать