Webpack 未编译

Question

With my React-Django project I'm running into an issue with Webpack. It's not generating the compiled file (main.js) like I expected and I'm not sure what the problem is. The file tree looks as follows:

|-- __init__.py
|-- admin.py
|-- apps.py
|-- migrations
|   -- __init__.py
|-- models.py
|-- package-lock.json
|-- package.json
|-- src
|   |-- components
|   |   -- App.js
|   -- index.js
|-- static
|   -- frontend
|-- templates
|   -- frontend
|       -- index.html
|-- tests.py
|-- urls.py
|-- views.py
|-- webpack.config.js

I configured webpack like this:

const path = require('path');

module.exports = {
  entry: [
    "./src/index.js"
  ],
  output: {
    filename: "main.js",
    path: path.resolve(__dirname, 'static', 'frontend')
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      }
    ]
  }
};

I'm running my react project with npm run dev , where the dev script is "dev": "webpack serve --mode development . This package.json looks as follows:

{
  "name": "frontend",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "webpack serve --mode development",
    "build": "webpack --mode production"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.13.1",
    "@babel/preset-env": "^7.13.5",
    "@babel/preset-react": "^7.12.13",
    "babel-loader": "^8.2.2",
    "html-webpack-plugin": "^5.2.0",
    "path": "^0.12.7",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "webpack": "^5.24.2",
    "webpack-cli": "^4.5.0",
    "webpack-dev-server": "^3.11.2"
  }
}

I've been looking for the mistake for a couple of hours now so I hope someone can help me out here:)

Answer 1

When you start webpack with webpack dev server (which you do with webpack serve ), it compiles everything into memory and serve from there. If you want to emit files you, probably don't need dev server, so just startgin webpack watch would be sufficient. If you need dev server and want to emit files, you can set it with this writeToDisk option