创建dist文件夹的Webpack开发服务器错误

Question

我想创建一个静态文件夹“ dist”但是我在命令上遇到了问题，其他人也遇到过同样的问题吗？

Package.json

"scripts": {
"start": "webpack-dev-server --open",
"dev": "webpack --mode development --watch ./frontend/src/index.js --output ./frontend/static/frontend/main.js",
"build": "webpack --mode production ./frontend/src/index.js --output ./frontend/static/frontend/main.js"

}，

Console image error

我的Webpack配置为

const path = require('path');
const publicPath = '/dist/';

module.exports = {

  entry: './index.js',

  output: {
    path: path.join(__dirname, publicPath),
    filename: 'bundle.js',
    publicPath: publicPath
  },

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

。babelrc是

 {

  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {  
          "node": "current"
        },
        "useBuiltIns": "usage",
        "corejs": 3
      }
    ],
    "@babel/preset-react"
  ],

  "plugins": [
    "@babel/plugin-proposal-class-properties",
    "react-hot-loader/babel"
  ]

}

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App';

import { Provider } from 'react-redux';
import store  from './store';


const app = (
    <Provider store = {store}>
        <App />
    </Provider>
)

ReactDOM.render(app, document.querySelector('#app'));

注意：我可以使用npm run dev（因为直接使用main可以）

Answer 1

您的图像显示您正在使用npm run start，如果要创建dist文件夹，则应尝试npm run build