Почему webpack не собирает проект?

Question

[rifat2125]

Здравствуйте!
Пробую настроить Вебпак так, чтобы он запускал Дев сервер и я могу вести разработку.

Он проект не собирает а выдает много подобных ошибок (в точности такие же, просто в разных файлах)

И вот


Сам конфиг:

spoiler

const fs = require('fs');
const webpack = require('webpack');
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

const BROWSER = process.env.BROWSERSLIST_ENV;
const IS_OLD = BROWSER === 'old';
const IS_MODERN = BROWSER === 'modern';

const MODE = process.env.NODE_ENV;
const IS_DEV = MODE === 'development' || MODE === 'watch';
const IS_PROD = MODE === 'production';
const IS_WATCH = MODE === 'watch';

const getFullPath = filepath => path.resolve(__dirname, filepath);

if (fs.existsSync('./dist/js')) {
  fs.promises.rm('./dist/js', {
    recursive: true
  });
}
if (fs.existsSync('./dist/css')) {
  fs.promises.rm('./dist/css', {
    recursive: true
  });
}

function getFolders(dir) {
  return fs.readdirSync(path.resolve(__dirname, dir))
    .filter(item => !item.startsWith('.'))
}

function getFiles(dir, ext) {
  return fs.readdirSync(
    path.resolve(__dirname, dir)
  ).filter(
    item => ext.test(item)
  );
}

function configureEntries() {
  let config = {
    default: [getFullPath('./src/js/app.js')]
  };
  const styles = getFiles('./src/sass/pages/promo', /\.s(c|a)ss$/);
  const scripts_folders = getFolders('./src/js/pages');

  styles.map((style) => {
    const [name, ext] = style.split('.');
    config[name] = [
      getFullPath('./src/js/app.js'),
      getFullPath(`./src/sass/pages/promo/${style}`)
    ];
  });

  scripts_folders.map((folder_name) => {
    config[folder_name] = [
      getFullPath(`./src/js/pages/${folder_name}/${folder_name}.js`)
    ];
  });

  return config;
}

function configureHtml() {
  const plugins = [];
  const templateFiles = fs.readdirSync(path.resolve(__dirname, './src/html/pages'))

  templateFiles.filter(file => file.split('.')[1] === 'html').map(html => {
    const [name, extension] = html.split('.');

    const item = new HtmlWebpackPlugin({
      filename: IS_WATCH ? `${name}.html` : `html/${name}.html`,
      title: name,
      chunks: [name],
      entry: `./src/js/pages/${name}.js`,
      template: path.resolve(__dirname, `./src/html/pages/${name}.${extension}`)
    });

    plugins.push(item);
  });

  return plugins;
}

function configureOptimization() {
  return {
    splitChunks: {
      chunks: 'async',
      minSize: 20000,
      minRemainingSize: 0,
      minChunks: 1,
      maxAsyncRequests: 30,
      maxInitialRequests: 30,
      enforceSizeThreshold: 50000,
      cacheGroups: {
        defaultVendors: {
          test: /[\\/]node_modules[\\/]/,
          priority: -10,
          reuseExistingChunk: true,
        },
        default: {
          minChunks: 2,
          priority: -20,
          reuseExistingChunk: true,
        },
      },
    },
  }
}

module.exports = {
  entry: configureEntries(),
  output: {
    filename: `js/${process.env.BROWSERSLIST_ENV}/[name]__[contenthash].js`,
    chunkFilename: `js/${process.env.BROWSERSLIST_ENV}/[name]__[contenthash].js`,
    publicPath: '/',
    path: getFullPath('./dist'),
  },
  stats: {
    errorDetails: true,
    children: true
 },
  cache: {
    type: 'filesystem',
  },
  module: {
    rules: [
      {
        test: /\.s[ac]ss$/i,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              url: false,
            }
          },
          {
            loader: 'sass-loader',
            options: {
              sassOptions: {
                indentedSyntax: true,
              }
            }
          },
        ]
      },
      {
        test: /\.(woff|ttf|otf|eot|woff2)$/i,
        type: 'asset/resource'
      },
      {
        test: /\.(png|svg|jpg|jpeg|gif)$/i,
        type: 'asset/resource',
      },
    ]
  },
  watchOptions: {
    ignored: /node_modules/
  },
  devServer: {
    https: true,
    port: 7777,
    open: true,
    devMiddleware: {
      writeToDisk: true,
    },
    hot: true,
    static: getFullPath('dist'),
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: `./css/[name]__[contenthash].css`,
      chunkFilename: `./css/[name]__[contenthash].css`,
    }),
    new webpack.ProvidePlugin({
      '$': 'cash-dom',
    }),
    new webpack.DefinePlugin({
      "isDev": JSON.stringify(IS_DEV),
      "isProd": JSON.stringify(IS_PROD),
      "isOld": JSON.stringify(IS_OLD),
      "isModern": JSON.stringify(IS_MODERN),
    }),
    ...configureHtml()
  ],
  optimization: configureOptimization(),
};

P.S. я только учусь настраивать, поэтому прошу не пишите негатив. И да, гуглить я умею, но не смог найти ответа на свой вопрос. Поэтому написал здесь, чтобы знающие люди смогли разъяснить нюансы и закрыть мои (возможно чьи-то еще) пробелы.

Comments

[rifat2125]

Вот код, который указан на скриншоте

// Version: 2.9.1

.tns-outer {
  padding: 0 !important; // remove padding: clientWidth = width + padding (0) = width
  [hidden] { display: none !important; }
  [aria-controls], [data-action] { cursor: pointer; }
}
.tns-slider {
  -webkit-transition: all 0s;
  -moz-transition: all 0s;
  transition: all 0s;
  > .tns-item {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }
}

.tns-horizontal {
  &.tns-subpixel {
    white-space: nowrap;
    > .tns-item {
      display: inline-block;
      vertical-align: top;
      white-space: normal;
    }
  }
  &.tns-no-subpixel {
    &:after {
      content: '';
      display: table;
      clear: both;
    }
    > .tns-item {
      float: left;
    }
  }
  &.tns-carousel {
    &.tns-no-subpixel {
      > .tns-item {
        margin-right: -100%;
      }
    }
  }
}
.tns-no-calc {
  position: relative;
  left: 0;
}
.tns-gallery {
  position: relative;
  left: 0;
  min-height: 1px; // make sure slider container is visible
  // overflow: hidden;
  > .tns-item {
    position: absolute;
    left: -100%;
    -webkit-transition: transform 0s, opacity 0s;
    -moz-transition: transform 0s, opacity 0s;
    transition: transform 0s, opacity 0s;
  }
  > .tns-slide-active {
    position: relative;
    left: auto !important;
  }
  > .tns-moving {
    -webkit-transition: all 0.25s;
    -moz-transition: all 0.25s;
    transition: all 0.25s;
  }
}
.tns-autowidth { display: inline-block; }
.tns-lazy-img {
  -webkit-transition: opacity 0.6s;
  -moz-transition: opacity 0.6s;
  transition: opacity 0.6s;
  opacity: 0.6;
  &.tns-complete { opacity: 1; }
}
.tns-ah {
  -webkit-transition: height 0s;
  -moz-transition: height 0s;
  transition: height 0s;
}
.tns-ovh { overflow: hidden; }
.tns-visually-hidden { position: absolute; left: -10000em; }
.tns-transparent { opacity: 0; visibility: hidden; }

.tns-fadeIn {
  opacity: 1;
  filter: alpha(opacity=100);
  z-index: 0;
}
.tns-normal, .tns-fadeOut {
  opacity: 0;
  filter: alpha(opacity=0);
  z-index: -1;
}


// *** Fix a viewport issue in initialization
.tns-vpfix {
  white-space: nowrap;
  > div, > li {
    display: inline-block;
  }
}

// *** Detecting browser capability ***
$width: 310px;
$height: 10px;
$count: 70;
$perpage: 3;

.tns-t {
  &-subp2 {
    margin: 0 auto;
    width: $width;
    position: relative;
    height: $height;
    overflow: hidden;
  }
  &-ct {
    width: (100% * $count / $perpage);
    width: -webkit-calc(100% * #{$count} / #{$perpage});
    width: -moz-calc(100% * #{$count} / #{$perpage});
    width: calc(100% * #{$count} / #{$perpage});
    position: absolute;
    right: 0;
    &:after {
      content: '';
      display: table;
      clear: both;
    }
    > div {
      width: (100% / $count);
      width: -webkit-calc(100% / #{$count});
      width: -moz-calc(100% / #{$count});
      width: calc(100% / #{$count});
      height: $height;
      float: left;
    }
  }
}

. Дело в том, что эти же файлы, на которые ругается webpack, собираются, когда я обычную сборку выполняю, но не работает, когда я использую webpack-dev-server

Answer 1

[Al_Ko]

У вас синтаксическая ошибка, в теле ошибки всё написано: ожидаемый символ не совпал с "{" , а по правильному запросу гуглится за секунды, думаю, вот решение — https://stackoverflow.com/a/54801251