webpack3.X配置babel-loader时报错

Question

当我在配置babel-loader的时候出现了问题，已经安装了babel-loader babel-core babel-preset-es2015 babel-preset-reacr babel-preset-env
我在本地和全局都安装了webpack

package.json

{
  "name": "1",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-env": "^2.4.1",
    "babel-loader": "^7.1.2",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "html-webpack-plugin": "^2.30.1",
    "uglifyjs-webpack-plugin": "^1.0.1",
    "webpack": "^3.8.1"
  }
}

核心问题


module: {

    rules: [{
        test: /\.(jsx|js)$/,
        use: {
            loader: 'babel-loader',
            options: {
                presets: ['es2015', 'react']
            },
            exclude: /node_modules/
        }
    }]
},

报错信息

webpack.config.js整体文件

const path = require('path');

const htmlplugin = require('html-webpack-plugin')

const uglify = require('uglifyjs-webpack-plugin');

module.exports = {
    entry: {
        a: './src/a.js',
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].js',
    },
    module: {
        rules: [{
            test: /\.(jsx|js)$/,
            use: {
                loader: 'babel-loader',
                options: {
                    presets: ['es2015', 'react']
                },
                exclude: /node_modules/
            }
        }]
    },
    plugins: [
        new uglify(),
        new htmlplugin({
            minify: {
                removeAttributeQuotes: true,
            },
            hash: true,
            template: './src/index.html'
        })
    ],
    devServer: {
        contentBase: path.resolve(__dirname, 'dist'),
        host: '192.168.43.205',
        compress: true,
        port: 9999
    },

}

Answer 1

exclude写在了use里面，应该是

   {
                test: /\.(jsx|js)$/,
                use: {
                    loader: "babel-loader",
                    query: {
                        presets: ['es2015', 'react']
                    }                
                },
                exclude: /node_modules/
            }

推荐用.babelrc，webpack主目录下建一个.babelrc，
webpack

 {
                 test: /\.(jsx|js)$/,
                use: {
                    loader: "babel-loader"
                },
                exclude: /node_modules/
            }

.babelrc

{
                presets: ['es2015', 'react']
            }

Answer 2

报错：webpack的config的api写错了。

问题：rules里的use写错了，它是个数组。exclude放在test同级。

test: /\.(jsx|js)$/,
use: [{
    loader: 'babel-loader',
    options: {
        presets: ['es2015', 'react']
    }
}],
exclude: /node_modules/