升級webpack4 webpack-merge反應問題

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_modules/babel-loader/lib/index.js）：錯誤：從'user / mywork / dev'中找不到模塊'babel-preset-env'-您是說“ @ babel / env”嗎？

我以前使用的是stage-2或stage-0來啟用箭頭功能等，但似乎與預設環境沖突，因此暫時將其刪除並按建議擴展.babelrc預設，但似乎還是無法獲得全部工作正常。

任何建議最歡迎，謝謝。

Answer 1

您要在兩個位置指定babel選項，首先在.babelrc中，然后在webpack.commonn.js中。 webpack.commonn.js中的選項優先，但是該設置是錯誤的：

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

通過以上操作，您告訴babel尋找未安裝的“ 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-proposal-class-properties。