Webpack 将eslint config react应用程序集成到现有项目

我尝试在现有项目中使用。我从githubpage复制了npm install命令：

npm install --save-dev eslint-config-react-app babel-eslint@7.1.1 eslint@3.16.1 eslint-plugin-flowtype@2.21.0 eslint-plugin-import@2.0.1 eslint-plugin-jsx-a11y@4.0.0 eslint-plugin-react@6.4.1

然后在项目的根目录下，我创建

.eslint

文件，其中包含：

{
  "extends": "react-app"
}

然后我启动webpack dev服务器，但没有收到关于未使用函数或变量的警告-没有

package.json-我用来启动应用程序的命令：

  "scripts": {
    "dev": "webpack-dev-server --config webpack/dev.config.js --hot --inline --progress --colors --history-api-fallback --host 0.0.0.0 --port 8080"
  },

var webpack = require('webpack');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var CopyWebpackPlugin = require('copy-webpack-plugin');
var path = require('path');

module.exports = {
    context: path.resolve(__dirname, '..'),
    entry: [
        'babel-polyfill',
        './src/client.js'
    ],
    output: {
        path: './public',
        filename: 'bundle.js'
    },
    module: {
        rules: [
            {
                test: /\.jsx?$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        plugins: ['transform-runtime', 'transform-class-properties', 'transform-decorators-legacy'],
                        presets: ['es2015', 'react', 'stage-0']
                    }
                },
            },
            {
                test: /\.scss$/,
                use: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: ['css-loader', 'sass-loader']
                })
            },
            {
                test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
                use: "url?limit=10000&mimetype=application/font-woff"
            },
            {
                test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/,
                use: "url?limit=10000&mimetype=application/font-woff"
            },
            {
                test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
                use: "url?limit=10000&mimetype=application/octet-stream"
            },
            {
                test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
                use: "file"
            },
            {
                test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
                use: "url?limit=10000&mimetype=image/svg+xml"
            },
        ]
    },
    resolve: {
        modules: [
            path.join(__dirname, 'src'),
            'node_modules'
        ],
        alias: {
            components: path.resolve(__dirname, '../src/components'),
            layouts: path.resolve(__dirname, '../src/layouts'),
            pages: path.resolve(__dirname, '../src/pages'),
            api: path.resolve(__dirname, '../src/api'),
        },
        extensions: ['.js', '.jsx']
    },

    devtool: 'inline-source-map',

    plugins: [
        new ExtractTextPlugin({
            filename: 'style.css',
            allChunks: true
        }),
        new CopyWebpackPlugin([
            {from: './static', to: './public/static'}
        ])
    ]
};

dev.config.js，它位于项目的

webpack

子目录中：

  "scripts": {
    "dev": "webpack-dev-server --config webpack/dev.config.js --hot --inline --progress --colors --history-api-fallback --host 0.0.0.0 --port 8080"
  },

var webpack = require('webpack');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var CopyWebpackPlugin = require('copy-webpack-plugin');
var path = require('path');

module.exports = {
    context: path.resolve(__dirname, '..'),
    entry: [
        'babel-polyfill',
        './src/client.js'
    ],
    output: {
        path: './public',
        filename: 'bundle.js'
    },
    module: {
        rules: [
            {
                test: /\.jsx?$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        plugins: ['transform-runtime', 'transform-class-properties', 'transform-decorators-legacy'],
                        presets: ['es2015', 'react', 'stage-0']
                    }
                },
            },
            {
                test: /\.scss$/,
                use: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: ['css-loader', 'sass-loader']
                })
            },
            {
                test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
                use: "url?limit=10000&mimetype=application/font-woff"
            },
            {
                test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/,
                use: "url?limit=10000&mimetype=application/font-woff"
            },
            {
                test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
                use: "url?limit=10000&mimetype=application/octet-stream"
            },
            {
                test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
                use: "file"
            },
            {
                test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
                use: "url?limit=10000&mimetype=image/svg+xml"
            },
        ]
    },
    resolve: {
        modules: [
            path.join(__dirname, 'src'),
            'node_modules'
        ],
        alias: {
            components: path.resolve(__dirname, '../src/components'),
            layouts: path.resolve(__dirname, '../src/layouts'),
            pages: path.resolve(__dirname, '../src/pages'),
            api: path.resolve(__dirname, '../src/api'),
        },
        extensions: ['.js', '.jsx']
    },

    devtool: 'inline-source-map',

    plugins: [
        new ExtractTextPlugin({
            filename: 'style.css',
            allChunks: true
        }),
        new CopyWebpackPlugin([
            {from: './static', to: './public/static'}
        ])
    ]
};

---

我在弹出后查看了

create react app

config，我所做的是：

1:

npm安装--保存dev eslint加载程序

2：将此添加到

package.json

：

"eslintConfig": {
    "extends": "react-app"
  }

3：将加载程序添加到

dev.config.js

：

    {
        test: /\.(js|jsx)$/,
        enforce: 'pre',
        exclude: /node_modules/,
        use: 'eslint-loader'
    },

不需要

.eslintrc

文件