javascript - 尝试运行我的 "webpack --config ./webpack.config.js"时出现错误

Question

我正在尝试为名为 Quill 的开源库运行 webpack 配置。 , 它使用 Webpack 作为 bundler 。当我运行命令 webpack --config ./_develop/webpack.config.js 时，配置尝试执行的每个 .js 文件都会出现以下错误:

ERROR in ./ui/tooltip.js

C:\Users\rinktacular\Documents\Projects\Quill\ui\tooltip.js
   1:16  error  Expected linebreaks to be 'LF' but found 'CRLF'  linebreak-style
   2:40  error  Expected linebreaks to be 'LF' but found 'CRLF'  linebreak-style
   3:24  error  Expected linebreaks to be 'LF' but found 'CRLF'  linebreak-style
   4:61  error  Expected linebreaks to be 'LF' but found 'CRLF'  linebreak-style
   5:50  error  Expected linebreaks to be 'LF' but found 'CRLF'  linebreak-style
   6:53  error  Expected linebreaks to be 'LF' but found 'CRLF'  linebreak-style
   7:61  error  Expected linebreaks to be 'LF' but found 'CRLF'  linebreak-style
   8:57  error  Expected linebreaks to be 'LF' but found 'CRLF'  linebreak-style
   9:75  error  Expected linebreaks to be 'LF' but found 'CRLF'  linebreak-style
  10:10  error  Expected linebreaks to be 'LF' but found 'CRLF'  linebreak-style
  11:6   error  Expected linebreaks to be 'LF' but found 'CRLF'  linebreak-style
  12:17  error  Expected linebreaks to be 'LF' but found 'CRLF'  linebreak-style
  13:4   error  Expected linebreaks to be 'LF' but found 'CRLF'  linebreak-style
  14:1   error  Expected linebreaks to be 'LF' but found 'CRLF'  linebreak-style
  15:11  error  Expected linebreaks to be 'LF' but found 'CRLF'  linebreak-style
  16:42  error  Expected linebreaks to be 'LF' but found 'CRLF'  linebreak-style
  17:4   error  Expected linebreaks to be 'LF' but found 'CRLF'  linebreak-style
  18:1   error  Expected linebreaks to be 'LF' but found 'CRLF'  linebreak-style
  19:24  error  Expected linebreaks to be 'LF' but found 'CRLF'  linebreak-style
  20:77  error  Expected linebreaks to be 'LF' but found 'CRLF'  linebreak-style
  21:62  error  Expected linebreaks to be 'LF' but found 'CRLF'  linebreak-style
  22:60  error  Expected linebreaks to be 'LF' but found 'CRLF'  linebreak-style
  23:40  error  Expected linebreaks to be 'LF' but found 'CRLF'  linebreak-style
  24:38  error  Expected linebreaks to be 'LF' but found 'CRLF'  linebreak-style
  25:43  error  Expected linebreaks to be 'LF' but found 'CRLF'  linebreak-style
  26:72  error  Expected linebreaks to be 'LF' but found 'CRLF'  linebreak-style
  27:56  error  Expected linebreaks to be 'LF' but found 'CRLF'  linebreak-style
  28:19  error  Expected linebreaks to be 'LF' but found 'CRLF'  linebreak-style
  29:52  error  Expected linebreaks to be 'LF' but found 'CRLF'  linebreak-style
  30:56  error  Expected linebreaks to be 'LF' but found 'CRLF'  linebreak-style
  31:52  error  Expected linebreaks to be 'LF' but found 'CRLF'  linebreak-style
  32:6   error  Expected linebreaks to be 'LF' but found 'CRLF'  linebreak-style
  33:50  error  Expected linebreaks to be 'LF' but found 'CRLF'  linebreak-style
  34:54  error  Expected linebreaks to be 'LF' but found 'CRLF'  linebreak-style
  35:52  error  Expected linebreaks to be 'LF' but found 'CRLF'  linebreak-style
  36:6   error  Expected linebreaks to be 'LF' but found 'CRLF'  linebreak-style
  37:54  error  Expected linebreaks to be 'LF' but found 'CRLF'  linebreak-style
  38:55  error  Expected linebreaks to be 'LF' but found 'CRLF'  linebreak-style
  39:69  error  Expected linebreaks to be 'LF' but found 'CRLF'  linebreak-style
  40:58  error  Expected linebreaks to be 'LF' but found 'CRLF'  linebreak-style
  41:42  error  Expected linebreaks to be 'LF' but found 'CRLF'  linebreak-style
  42:6   error  Expected linebreaks to be 'LF' but found 'CRLF'  linebreak-style
  43:18  error  Expected linebreaks to be 'LF' but found 'CRLF'  linebreak-style
  44:4   error  Expected linebreaks to be 'LF' but found 'CRLF'  linebreak-style
  45:1   error  Expected linebreaks to be 'LF' but found 'CRLF'  linebreak-style
  46:11  error  Expected linebreaks to be 'LF' but found 'CRLF'  linebreak-style
  47:46  error  Expected linebreaks to be 'LF' but found 'CRLF'  linebreak-style
  48:45  error  Expected linebreaks to be 'LF' but found 'CRLF'  linebreak-style
  49:4   error  Expected linebreaks to be 'LF' but found 'CRLF'  linebreak-style
  50:2   error  Expected linebreaks to be 'LF' but found 'CRLF'  linebreak-style
  51:1   error  Expected linebreaks to be 'LF' but found 'CRLF'  linebreak-style
  52:1   error  Expected linebreaks to be 'LF' but found 'CRLF'  linebreak-style
  53:24  error  Expected linebreaks to be 'LF' but found 'CRLF'  linebreak-style

✖ 53 problems (53 errors, 0 warnings)
  53 errors, 0 warnings potentially fixable with the `--fix` option.

 @ ./quill.js 101:15-38
 @ multi ./quill.js

这是配置:

var path = require('path');
var pkg = require('../package.json');
var webpack = require('webpack');
var ExtractTextPlugin = require('extract-text-webpack-plugin');

var bannerPack = new webpack.BannerPlugin({
  banner:
    'Quill Editor v' + pkg.version + '\n' +
    'https://quilljs.com/\n' +
    'Copyright (c) 2014, Jason Chen\n' +
    'Copyright (c) 2013, salesforce.com',
  entryOnly: true
});
var constantPack = new webpack.DefinePlugin({
  QUILL_VERSION: JSON.stringify(pkg.version)
});

var source = [
  'quill.js',
  'core.js',
  'blots',
  'core',
  'formats',
  'modules',
  'test',
  'themes',
  'ui'
].map(function(file) {
  return path.resolve(__dirname, '..', file);
});


module.exports = function(env) {
  let config = {
    context: path.resolve(__dirname, '..'),
    entry: {
      'quill.js': ['./quill.js'],
      'quill.core.js': ['./core.js'],
      'quill.core': './assets/core.styl',
      'quill.bubble': './assets/bubble.styl',
      'quill.snow': './assets/snow.styl',
      'unit.js': './test/unit.js'
    },
    output: {
      filename: '[name]',
      library: 'Quill',
      libraryExport: 'default',
      libraryTarget: 'umd',
      path: path.resolve(__dirname, '../dist/')
    },
    resolve: {
      alias: {
        'parchment': path.resolve(__dirname, '../node_modules/parchment/src/parchment')
      },
      extensions: ['.js', '.styl', '.ts']
    },
    module: {
      rules: [{
        test: /\.js$/,
        use: ['eslint-loader'],
        include: source,
        enforce: 'pre'
      }, {
        test: /\.ts$/,
        use: [{
          loader: 'ts-loader',
          options: {
            compilerOptions: {
              declaration: false,
              target: 'es5',
              module: 'commonjs'
            },
            transpileOnly: true
          }
        }]
      }, {
        test: /\.styl$/,
        include: [
          path.resolve(__dirname, '../assets')
        ],
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: [
            'css-loader',
            'stylus-loader'
          ]
        })
      }, {
        test: /\.svg$/,
        include: [
          path.resolve(__dirname, '../assets/icons')
        ],
        use: [{
          loader: 'html-loader',
          options: {
            minimize: true
          }
        }]
      }, {
        test: /\.js$/,
        include: source,
        use: [{
          loader: 'babel-loader',
          options: {
            presets: ['es2015']
          }
        }]
      }],
      noParse: [
        /\/node_modules\/clone\/clone\.js$/,
        /\/node_modules\/eventemitter3\/index\.js$/,
        /\/node_modules\/extend\/index\.js$/
      ]
    },
    plugins: [
      bannerPack,
      constantPack,
      new ExtractTextPlugin({
        filename: '[name].css',
        allChunks: true
      })
    ],
    devServer: {
      contentBase: path.resolve(__dirname, '../dist'),
      hot: false,
      port: process.env.npm_package_config_ports_webpack,
      stats: 'minimal',
      disableHostCheck: true
    }
  };

  if (env && env.dev) {
    config.module.rules = config.module.rules.slice(1);   // Remove linter
    config.module.rules[3].use[0].options = {
      plugins: ['transform-es2015-modules-commonjs']
    };
  }

  if (env && env.minimize) {
    config.entry = {
      'quill.min.js': './quill.js'
    };
    config.plugins.push(
      new webpack.optimize.UglifyJsPlugin({
        sourceMap: true
      })
    );
    config.devtool = 'source-map';
  }

  if (env && env.coverage) {
    config.module.rules[4].use[0].options = {
      plugins: ['istanbul', 'transform-es2015-modules-commonjs']
    };
  }

  return config;
};

当然，这都是开源的，我没有改变任何东西，所以这是按照他们在 Local Development 上的指示进行的全新安装。 。因此，我真的不太清楚 webpack 的配置是如何工作的，我的配置文件有什么问题，以及我可以做些什么来改变它。

Answer 1

你的 webpack 中有一条规则，告诉你使用加载器加载 js 文件。这个加载器是“eslint-loader”，这个加载器用于 lint 你的 js 文件。这个加载程序告诉您换行不正确。有两种方法可以解决这个问题:

• 使用使用正确换行符的编辑器
• 删除或更改 .eslintc 中的规则

LF (\n) 是 Linux 中使用的换行符，而 CRLF 是 Windows 中使用的换行符 (\r\n)

您还可以使用“eslint --fix”尝试修复此问题

./node_modules/.bin/eslint --fix yourFileThatHaserrors

但是如果您使用转换换行符的编辑器，则每次保存文件时都会发生这种情况。

总结一下:

• 您的配置文件很好
• 您的编辑不是