webpack4 小白遇到瓶颈, 求指教

Question

链接: https://pan.baidu.com/s/1W0YF... 密码: us4h
代码放在云盘了, 启动项目提示:

查了很多资料, 不知道是哪里配置错误

webpack.config.js

const path = require("path")
const host = 'localhost'
const port = 8008
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CleanWebpackPlugin = require('clean-webpack-plugin');

module.exports = (env, argv) => {

  const devMode = argv.mode !== 'production'
  return {
    devServer: {
      host,
      port,
      contentBase: __dirname + './src/templates'
    },
    devtool: '#cheap-module-eval-source-map',
    entry: [
      "babel-polyfill",
      path.join(__dirname, './app.js')
    ],
    output: {
      path: path.resolve(__dirname, './dist'),
      filename: "entry/index.js",
      publicPath: __dirname + "/src",
    },
    resolve: {
      modules: [
        path.join(__dirname, './src'),
        'node_modules',
      ],
      extensions: [ '.js', '.jsx', '.json', '.ts', '.tsx' ],
    },
    module: {
      rules: [
        {
          test: /\.css$/,
          use: [
              devMode ? 'style-loader' : MiniCssExtractPlugin.loader,
              'css-loader'
          ]
        },
        {
          test: /\.less$/,
          use: [
              devMode ? 'style-loader' : MiniCssExtractPlugin.loader,
              'css-loader',
              'less-loader',
          ]
        },
        {
          test: /(\.jsx|\.js)$/,
          use: [
            {
              loader: 'babel-loader',
              options: {
                presets: ['react', 'env', 'stage-0']
              }
            },
          ],
          exclude: /node_modules/
        },
        {
          test: /\.(png|jpg|gif)$/,
          use: [
            {
              loader: 'file-loader',
              options: {}
            }
          ]
        }
      ]
    },
    plugins: [
      new MiniCssExtractPlugin({
        filename: "[name].css",
        chunkFilename: "[id].css"
      }),
      new CleanWebpackPlugin(['dist']),
    ]
  }
}

package.json

{
  "name": "moving_on",
  "version": "1.0.0",
  "description": "test project",
  "main": "index.js",
  "directories": {
    "doc": "doc"
  },
  "scripts": {
    "test": "test command",
    "dev": "webpack-dev-server --config=webpack.config.js --mode development",
    "build": "webpack --mode production --module-bind js=babel-loader",
    "start": "npm run dev"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/Vsion/moving_on.git"
  },
  "author": "Vsion",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/Vsion/moving_on/issues"
  },
  "homepage": "https://github.com/Vsion/moving_on#readme",
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-polyfill": "^6.26.0",
    "babel-preset-env": "^1.7.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-0": "^6.24.1",
    "clean-webpack-plugin": "^0.1.19",
    "cross-env": "^5.2.0",
    "css-loader": "^1.0.0",
    "file-loader": "^1.1.11",
    "html-webpack-plugin": "^3.2.0",
    "less": "^3.8.0",
    "less-loader": "^4.1.0",
    "mini-css-extract-plugin": "^0.4.1",
    "postcss-loader": "^2.1.6",
    "react": "^16.4.1",
    "react-dom": "^16.4.1",
    "style-loader": "^0.21.0",
    "thread-loader": "^1.1.5",
    "webpack": "^4.16.2",
    "webpack-cli": "^3.1.0",
    "webpack-dev-server": "^3.1.5"
  }
}

目录结构;

Answer 1

已联线帮忙解决。给个好评吧。

Answer 2

https://juejin.im/post/5b4609...，关于webpack的详细配置