Блог

У меня возникают проблемы при запуске webpack-dev-server вместе с stylelint-webpack-plugin , но webpack-dev-server разбился даже только с ошибками stylelint

Моя версия webpack-dev-server : 3.2.1

Мой webpack.config.js файл :

 /* eslint-disable max-len */
/* eslint-disable linebreak-style */
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const FaviconsWebpackPlugin = require('favicons-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const StyleLintPlugin = require('stylelint-webpack-plugin');
// const CspPlugin = require('csp-html-webpack-plugin');
// const PreloadWebpackPlugin = require('preload-webpack-plugin');

const config = {
  entry: {
    main: './src/scripts/index.js',
    player: './src/scripts/player/player.js',
  },
  output: {
    'filename': '[name].bundle.js',
    'path': path.resolve(__dirname, 'dist'),
    'crossOriginLoading': 'use-credentials',
  },
  module: {
    rules: [{
      test: /.js$/,
      exclude: /(node_modules|bower_components)/,
      use: [{
        loader: 'babel-loader',
        options: {
          cacheDirectory: true,
        },
      }],
    },
    {
      test: /.(woff|woff2|eot|ttf|otf)$/,
      use: [{
        loader: 'file-loader',
        options: {
          name() {
            if (process.env.NODE_ENV === 'development') {
              return '[path][name].[ext]';
            }
            return '[hash].[ext]';
          },
          outputPath: 'font',
        },
      }],
    },
    {
      test: /.css$/,
      use: ['style-loader', 'css-loader'],
    },
    {
      test: /.scss$/,
      use: ['style-loader',
        MiniCssExtractPlugin.loader,
        'css-loader',
        'sass-loader',
      ],
    },
    {
      test: /.(png|svg|jpg|gif|eot|ttf|woff|woff2|otf)$/,
      use: [{
        loader: 'url-loader',
        options: {
          limit: 10000,
        },
      }],
    },
      // {
      //   test: /.html$/,
      //   use: ['file-loader?name=[name].[ext]', 'extract-loader', 'html-loader'],
      // },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'src/index.html',
    }),
    new MiniCssExtractPlugin({
      filename: '[name].css',
      chunkFilename: '[id].css',
    }),
    new StyleLintPlugin({
      configFile: './.stylelintrc.json',
    }),
    new webpack.AutomaticPrefetchPlugin(),
    new FaviconsWebpackPlugin({
      // Your source logo
      logo: './src/favicon.png',
      // The prefix for all image files (might be a folder or a name)
      prefix: 'icons-[hash]/',
      // Emit all stats of the generated icons
      emitStats: false,
      // The name of the json containing all favicon information
      statsFilename: 'iconstats-[hash].json',
      // Generate a cache file with control hashes and
      // don't rebuild the favicons until those hashes change
      persistentCache: true,
      // Inject the html into the html-webpack-plugin
      inject: true,

      // which icons should be generated (see https://github.com/haydenbleasel/favicons#usage)
      icons: {
        android: true,
        appleIcon: true,
        appleStartup: true,
        coast: true,
        favicons: true,
        firefox: true,
        opengraph: true,
        twitter: true,
        yandex: true,
        windows: true,
      },
    }),
  ],
  optimization: {
    splitChunks: {
      chunks: 'all',
      minSize: 30000,
      maxSize: 0,
      minChunks: 1,
      maxAsyncRequests: 5,
      maxInitialRequests: 3,
      automaticNameDelimiter: '~',
      name: true,
      cacheGroups: {
        vendors: {
          test: /[\/]node_modules[\/]/,
          priority: -10,
        },
        default: {
          minChunks: 2,
          priority: -20,
          reuseExistingChunk: true,
        },
      },
    },
  },
  devServer: {
    stats: 'errors-only',
    overlay: true,
    host: process.env.HOST, // Defaults to `localhost`
    port: process.env.PORT, // Defaults to 8080
    open: true, // Open the page in browser
  },
};

module.exports = (env, argv) => {
  if (argv.mode === 'development') {
    config.devtool = 'nosource-source-map';
  }
  if (argv.mode === 'production') {
    config.devtool = 'sourcemap';
  }
  return config;
};
  

и вот результат:

 [nodemon] 1.18.10
[nodemon] to restart at any time, enter `rs`
[nodemon] watching: webpackconfig.js
[nodemon] starting `webpack-dev-server --mode development`
i ｢wds｣: Project is running at http://localhost:8081/
i ｢wds｣: webpack output is served from /
i ｢wdm｣: wait until bundle finished: /
× ｢wdm｣:
ERROR in
static/styles/main.scss
   8:1  ×  Expected no more than 1 empty line                                                                                                 max-emp
  18:1  ×  Expected no more than 1 empty line                                                                                                 max-emp
  21:1  ×  Expected no more than 1 empty line                                                                                                 max-emp
  22:1  ×  Expected no more than 1 empty line                                                                                                 max-emp
  36:1  ×  Expected no more than 1 empty line                                                                                                 max-emp
  81:1  ×  Expected no more than 1 empty line                                                                                                 max-emp
 136:7  ×  Expected selector ".control__seek-bar::-webkit-progress-bar" to come before selector ".control__seek-bar:active"                   no-desc
 136:7  ×  Expected selector ".control__seek-bar::-webkit-progress-bar" to come before selector ".control__seek-bar:hover"                    no-desc
 136:7  ×  Expected selector ".control__seek-bar::-webkit-progress-bar" to come before selector ".control__seek--volume .control__seek-bar"   no-desc
....

i ｢wdm｣: Failed to compile.
  

Вы можете, должны быть в состоянии отключить это с помощью:

Ошибки эмитента: false

смотрите:

https://webpack.js.org/plugins/stylelint-webpack-plugin/#emiterrors

 emitErrors
Type: Boolean Default: true

If true, pipes stylelint error severity messages to the webpack compiler's error message handler.

Note: When this property is disabled all stylelint messages are piped to the webpack compiler's warning message handler.