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

Question

我想创建一个 static 文件夹“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"

},

控制台图像错误

我的 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 运行 dev （因为这个直接使用 main）

Answer 1

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