升级webpack4 webpack-合并反应问题

Question

我一直在尝试将React项目更新为webpack4，但是无论配置或建议/解决方案如何，我都会尝试它仍然是错误的。

我现在有以下设置：

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"
  }
}

.babelrc

{
  "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_ Did /babel-加载程序/lib/index.js)：错误:无法找到模块‘babel-预设-env’从'user/mywork/dev‘-您的意思是"@babel/env"？

我以前使用第2阶段或第0阶段来启用箭头函数等，但这似乎与预设-env冲突，所以现在已经删除了它，并按推荐的方式扩展了.babelrc预置，但仍然无法使整个过程正常工作。

任何建议都欢迎您，谢谢。

Answer 1

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

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

有了以上这些，你就会告诉babel去寻找‘babel-预设-env’，‘babel-预设-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-proposal properties。