当我尝试从 webpack3 升级到 webpack4 时出错答案

【问题标题】：Error when I tried to upgrade from webpack3 to webpack4当我尝试从 webpack3 升级到 webpack4 时出错
【发布时间】：2019-03-10 14:57:42
【问题描述】：

当我将项目从 webpack 3.x 升级到 webpack 4.0.0 时，出现以下错误

    ERROR in multi script-loader!jquery/dist/jquery.min.js script-loader!foundation-sites/dist/js/foundation.min.js eventsource-polyfill webpack-hot-middleware/client?reload=true ./src/index.jsx
Module not found: Error: Can't resolve 'babel-loader' in 'C:\projects\rebasing\uisrc'
 @ multi script-loader!jquery/dist/jquery.min.js script-loader!foundation-sites/dist/js/foundation.min.js eventsource-polyfill webpack-hot-middleware/client?reload=true ./src/index.jsx

规则配置如下配置文件所示

rules: [
  {
    test: /\.(jsx?)$/,
    use: 'babel-loader',
    exclude: /node_modules/,
  },
]

Package.json 有以下库

"devDependencies": {
"babel-cli": "6.26.0",
"babel-core": "6.8.0",
"babel-eslint": "7.0.0",
"babel-loader": "7.1.5",
"babel-preset-es2015": "6.6.0",
"babel-preset-react": "6.5.0",
"babel-preset-react-hmre": "1.1.1",
"babel-preset-stage-0": "6.5.0",
"babel-preset-stage-2": "6.17.0",
"babel-register": "6.26.0",
}

任何帮助将不胜感激。

【问题讨论】：

标签： reactjs webpack webpack-4 babel-loader

【解决方案1】：

在 webpack4 中配置应该是 loader: "babel-loader" 而不是 use: "babel-loader"

  rules: [
        {
            //tell webpack to use jsx-loader for all *.jsx files
            test: /\.(jsx?)$/,
            exclude: /node_modules/,
            loader: "babel-loader"
        },
   ]

这是我的 webpack4 工作演示

我正在使用的版本

"webpack": "^4.15.0",

"webpack-cli": "^3.0.8",

"webpack-dev-server":"^3.1.4",

"babel-core": "^6.26.3",

"babel-loader": "^7.1.5",

"babel-plugin-transform-class-properties": "^6.24.1",

"babel-plugin-transform-object-rest-spread": "^6.26.0",

“babel-polyfill”：“^6.26.0”，“babel-preset-env”：“^1.7.0”，

"babel-preset-react": "^6.24.1"

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const CompressionPlugin = require("compression-webpack-plugin");
const webpack = require('webpack');

module.exports = {
    target: "web",
    entry: [
        "whatwg-fetch",
        'webpack-dev-server/client?http://localhost:8090',
        'webpack/hot/only-dev-server',
        'babel-polyfill',
        "./src/index.js"
        ],
    output: {
        path: path.resolve(__dirname, "build"),
        filename: "bundle.js",
        publicPath: "/"
        //make sure port 8090 is used when launching webpack-dev-server
    },
    plugins: [new HtmlWebpackPlugin({
        template: "index.html"
    }),
    new CompressionPlugin({
        asset: "[path].gz[query]",
        algorithm: "gzip",
        test: /\.js$|\.jsx$|\.css$|\.html$/,
        threshold: 10240,
        minRatio: 0.8
    }),
    new webpack.HotModuleReplacementPlugin(),
    // enable HMR globally

    new webpack.NoEmitOnErrorsPlugin(),
    new webpack.ProvidePlugin({   
        jQuery: 'jquery',
        $: 'jquery',
        jquery: 'jquery'
    })
    ],
    module: {
        rules: [
            {
                //tell webpack to use jsx-loader for all *.jsx files
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                loader: "babel-loader"
            },
            {
                test: /\.css$/,
                loader: "style-loader!css-loader"
            },
            {
                test: /\.(png|jpg|jpeg|gif|woff|woff2|svg)$/,
                loader: 'url-loader?limit=100000'
            },
            {
                test: /\.(eot|ttf)$/,
                loader: "file-loader"  
            },
            {
                test: /\.html$/,
                exclude: /node_modules/,
                loader: 'html-loader'
            },
            {
                test: /\.scss$/,
                loaders: ["style-loader", "css-loader", "sass-loader"]
            }
        ]
    },
    resolve: {
        modules: [
            path.resolve("./src"),
            path.resolve("./node_modules")
        ],
        extensions: [".js", ".jsx"]
    },
    devServer: {
        watchOptions: {
        // Needed for Windows Subsystem for Linux dev environment:
            poll: true
        },
        contentBase: "/build"
    },
    devtool: "cheap-module-eval-source-map",
    node: {
        child_process : "empty",
        fs: "empty"
    }
};

【讨论】：

我也试过用loader，但是没用
@scary_devil 我已将我的工作解决方案添加到答案中。请看一下
感谢您的快速回复.. 但由于我们项目中的 css 导入，我花了一些时间来解决问题。

【解决方案2】：

如果您还没有清除 node_modules 缓存并重新安装，请尝试：

rm -rf node_modules/
rm -rf ~/.npm
npm cache verify
npm install

【讨论】：

我已经尝试过很多次了。但问题与我的配置文件本身有关。
很高兴您解决了这个问题！