如何正确配置 webpack？

Question

我尝试完成本 教程，但我认为在配置 webpack 时遇到了一些麻烦。 我正在逐步制作教程，但它不起作用..

错误] 无法在项目商店执行目标 com.github.eirslett:frontend-maven-plugin:1.10.3:webpack (webpack build)：无法运行任务：'webpack.js' 失败。 org.apache.commons.exec.ExecuteException：进程退出并出现错误：2

错误看起来像：

[INFO] ERROR in ./src/main/js/app.js
[INFO] Module not found: Error: Can't resolve './client' in '/home/kk/IdeaProjects/e-commerce/src/main/js'
[INFO]  @ ./src/main/js/app.js 29:13-32
[INFO] 
[INFO] ERROR in ./src/main/js/app.js
[INFO] Module not found: Error: Can't resolve 'react' in '/home/kk/IdeaProjects/e-commerce/src/main/js'
[INFO]  @ ./src/main/js/app.js 25:12-28
[INFO] 
[INFO] ERROR in ./src/main/js/app.js
[INFO] Module not found: Error: Can't resolve 'react-dom' in '/home/kk/IdeaProjects/e-commerce/src/main/js'
[INFO]  @ ./src/main/js/app.js 27:15-35

webpack.config.js：

var path = require('path');

module.exports = {
    entry: './src/main/js/app.js',
    devtool: 'sourcemaps',
    cache: true,
    mode: 'development',
    output: {
        path: __dirname,
        filename: './src/main/resources/static/built/bundle.js'
    },
    module: {
        rules: [
            {
                test: path.join(__dirname, '.'),
                exclude: /(node_modules)/,
                use: [{
                    loader: 'babel-loader',
                    options: {
                        presets: ["@babel/preset-env", "@babel/preset-react"]
                    }
                }]
            }
        ]
    }

};

应用程序.js：

'use strict';

const React = require('react');
const ReactDOM = require('react-dom');
const client = require('./client');

class App extends React.Component {...}
class EmployeeList extends React.Component{...}
class Employee extends React.Component{...}
ReactDOM.render(<App/>, document.getElementById('react'))

Answer 1

似乎您需要从提供的教程中复制粘贴package.json片段并运行npm i