如何正確配置 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