升级webpack4 WebPack-合并反应问题

Question

我一直在尝试将React项目更新到webpack4，但无论配置还是Advise/Solution，我尝试它仍然是错误的。

我当前有以下设置：

package.json

{
  "name": "PROJECTNAME",
  "version": "1.0.13",
  "description": "DESC",
  "main": "index.js",
  "engines": {
    "node": "8.2.1"
  },
  "scripts": {
    "build": "webpack --config webpack.prod.js --progress",
    "dev": "webpack-dev-server --config webpack.dev.js --open --hot --watch"
  },
  "keywords": [],
  "author": "AUTHOR",
  "license": "MIT",
  "resolve": {
    "extensions": [
      ".js",
      ".scss"
    ]
  },
  "dependencies": {
    "@fortawesome/fontawesome": "^1.1.8",
    "@fortawesome/fontawesome-svg-core": "^1.2.2",
    "@fortawesome/free-regular-svg-icons": "^5.2.0",
    "@fortawesome/free-solid-svg-icons": "^5.2.0",
    "@fortawesome/react-fontawesome": "^0.1.0",
    "ajv": "^6.5.2",
    "ajv-keywords": "^3.2.0",
    "axios": "^0.18.0",
    "fusioncharts": "^3.12.2",
    "node-sass": "^4.6.1",
    "prop-types": "^15.6.0",
    "react": "^16.4.1",
    "react-dom": "^16.4.1",
    "react-fusioncharts": "^1.0.5",
    "react-resize-detector": "^1.1.0",
    "react-router-dom": "^4.2.2",
    "react-select": "^1.1.0",
    "recharts": "^1.2.0"
  },
  "devDependencies": {
    "@babel/core": "^7.1.2",
    "@babel/plugin-proposal-function-bind": "^7.0.0",
    "@babel/preset-env": "^7.1.0",
    "@babel/preset-react": "^7.0.0",
    "@babel/preset-stage-0": "^7.0.0",
    "babel-loader": "^8.0.4",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "classnames": "^2.2.6",
    "clean-webpack-plugin": "^0.1.19",
    "copy-webpack-plugin": "^4.5.2",
    "css-loader": "^1.0.0",
    "file-loader": "^2.0.0",
    "html-loader": "^0.5.5",
    "html-webpack-plugin": "^3.0.6",
    "react-hot-loader": "^4.3.11",
    "sass-loader": "^7.1.0",
    "style-loader": "^0.23.0",
    "uglifyjs-webpack-plugin": "^2.0.1",
    "webpack": "^4.20.2",
    "webpack-cli": "^3.1.1",
    "webpack-dev-server": "^3.1.0",
    "webpack-merge": "^4.1.4"
  }
}

.巴贝尔c

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react",
    "@babel/plugin-proposal-function-bind"
  ],
  "plugins": [
    "babel-plugin-transform-class-properties"
  ]
}

webpack.commonn.js

const path = require('path');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: {
        app: './src/index.js'
    },
    output: {
        path: path.join(__dirname,'/public'),
        filename: 'bundle.js'
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['env','react','es2015'],
                        plugins: ['transform-class-properties']
                    }
                }
            },
            {
                test: /\.css$/,
                use: ["style-loader","css-loader"]
            }
        ]
    },
    plugins: [
        new CleanWebpackPlugin(['public']),
        new HtmlWebpackPlugin({
            template: './src/index.html'
        })
    ]
};

webpack.dev.js

const webpack = require('webpack');
const merge = require('webpack-merge');
const common = require('./webpack.common');

module.exports = merge(common, {
    mode: 'development',
    devtool: 'inline-source-map',
    devServer: {
        contentBase: './public'
    }
});

webpack.prod.js

const merge = require('webpack-merge');
const common = require('./webpack.common');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');

module.exports = merge(common, {
    mode: 'production',
    optimization: {
        minimizer: [
            new UglifyJSPlugin({
                sourceMap: true,
                uglifyOptions: {
                    compress: {
                        inline: false
                    },
                    mangle: {
                        keep_fnames: true
                    }
                }
            })
        ]
    },
    devtool: 'source-map'
});

index.js

"use strict";
import React from 'react';
import ReactDOM from 'react-dom';
import './styles/app.scss';
import App from './components/App';

if (process.env.NODE_ENV !== 'production') {
    console.log('USING DEV configuration')
}

const app = (
    <App/>
);
ReactDOM.render(app, document.getElementById('app'));

当前错误为：

./src/index.js模块生成失败（来自./node_modules/babel-loader/lib/index.js）：错误：从“user/mywork/dev”中找不到模块“babel-preset-env”-您是说“@babel/env”吗？

我以前使用stage-2或stage-0来启用箭头函数等，但这似乎与preset-env冲突，所以现在删除了它，并按建议扩展了.babelrc预置，但似乎仍无法使整个功能正常工作。

任何建议都非常欢迎，谢谢。

Answer 1

您在两个地方指定了babel选项，首先在.babelrc中，然后在webpack.commonn.js中。js中的选项优先，但该设置是错误的：

presets: ['env','react','es2015']

用上面的方法，你告诉巴别寻找“babel-preset-env”、“babel-preset-react”等，而这些都是你没有安装的。

因此,您得到了错误：

Cannot find module 'babel-preset-env' from 'user/mywork/dev' - Did you mean "@babel/env"?

由于您安装了：

@babel/preset-env, and @babel/preset-react, etc. 

您应该指定：

presets: ['@babel/env','@babel/preset-react', .... ],

但是您应该在一个地方指定Babel选项，要么在WebPack配置中，要么在.babelrc中--而不是在两个地方指定。

我注意到的另一个错误是:babel-plugin-transform-class-properties，它与Bable@7不兼容。您应该安装@babel/plugin-proposition-class-properties。