运行npm启动时Webpack遇到问题

如何解决运行npm启动时Webpack遇到问题

我想从头开始设置Typescript + react项目，因此决定从头开始创建webpack.config.js。这是代码：

const path = require（“ path”）; const webpack = require（“ webpack”）; const TSLintPlugin = require（“ tslint-webpack-plugin”）;

module.exports = {
  entry: "./src/index.tsx",output: {
    filename: "bundle.js",path: path.resolve(__dirname + "/dist"),publicPath: "/dist/",},// Enable sourcemaps for debugging webpack's output.
  devtool: "source-map",// Dev server options
  devServer: {
    port: 3030,historyApiFallback: true,inline: true,resolve: {
    // Add '.ts' and '.tsx' as resolvable extensions.
    extensions: [".ts",".tsx",".js",".json"],module: {
    rules: [
      {
        test: /\.tsx?$/,exclude: /node_modules/,loader: "tslint",// All files with a '.ts' or '.tsx' extension will be handled by 'awesome-typescript-loader'.
      {
        test: /\.tsx?$/,loader: "awesome-typescript-loader",{
        test: /\.(js)$/,loader: "eslint-loader",// All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
      {
        enforce: "pre",test: /\.js$/,loader: "source-map-loader",],plugins: [
    new webpack.HotModuleReplacementPlugin(),new TSLintPlugin({
      files: ["./src/**/*.ts"],}),// When importing a module whose path matches one of the following,just
  // assume a corresponding global variable exists and use that instead.
  // This is important because it allows us to avoid bundling all of our
  // dependencies,which allows browsers to cache those libraries between builds.
  externals: {
    react: "React","react-dom": "ReactDOM",};

这也是package.json文件：

{
  "name": "newproject","version": "1.0.0","description": "","main": "index.js","scripts": {
    "start": "webpack-dev-server --config .webpack.config.js --mode development"
  },"author": "","license": "ISC","devDependencies": {
    "awesome-typescript-loader": "^5.2.1","eslint": "^7.8.1","eslint-loader": "^4.0.2","tslint": "^6.1.3","webpack": "^4.44.1","webpack-cli": "^3.3.12","webpack-dev-server": "^3.11.0"
  },"dependencies": {
    "@types/react": "^16.9.49","@types/react-dom": "^16.9.8","source-map-loader": "^1.1.0","tslint-webpack-plugin": "^2.1.0"
  }
}

但是当我运行npm start时，我会看到此错误：

> newproject@1.0.0 start C:\Users\W10\Desktop\newproject
> webpack --config .webpack.config.js

C:\Users\W10\Desktop\newproject\node_modules\webpack-cli\bin\cli.js:93
                                throw err;
                                ^

Error: Cannot find module 'C:\Users\W10\Desktop\newproject\.webpack.config.js'
Require stack:
- C:\Users\W10\Desktop\newproject\node_modules\webpack-cli\bin\utils\convert-argv.js
- C:\Users\W10\Desktop\newproject\node_modules\webpack-cli\bin\cli.js
- C:\Users\W10\Desktop\newproject\node_modules\webpack\bin\webpack.js
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:965:15)
    at Function.Module._load (internal/modules/cjs/loader.js:841:27)
    at Module.require (internal/modules/cjs/loader.js:1025:19)
    at require (C:\Users\W10\Desktop\newproject\node_modules\v8-compile-cache\v8-compile-cache.js:161:20)
    at WEBPACK_OPTIONS (C:\Users\W10\Desktop\newproject\node_modules\webpack-cli\bin\utils\convert-argv.js:114:13)
    at requireConfig (C:\Users\W10\Desktop\newproject\node_modules\webpack-cli\bin\utils\convert-argv.js:116:6)
    at C:\Users\W10\Desktop\newproject\node_modules\webpack-cli\bin\utils\convert-argv.js:123:17
    at Array.forEach (<anonymous>)
    at module.exports (C:\Users\W10\Desktop\newproject\node_modules\webpack-cli\bin\utils\convert-argv.js:121:15)
    at C:\Users\W10\Desktop\newproject\node_modules\webpack-cli\bin\cli.js:71:45
    at Object.parse (C:\Users\W10\Desktop\newproject\node_modules\yargs\yargs.js:576:18)
    at C:\Users\W10\Desktop\newproject\node_modules\webpack-cli\bin\cli.js:49:8
    at Object.<anonymous> (C:\Users\W10\Desktop\newproject\node_modules\webpack-cli\bin\cli.js:366:3)
    at Module._compile (internal/modules/cjs/loader.js:1137:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1157:10)
    at Module.load (internal/modules/cjs/loader.js:985:32)
    at Function.Module._load (internal/modules/cjs/loader.js:878:14)
    at Module.require (internal/modules/cjs/loader.js:1025:19)
    at require (internal/modules/cjs/helpers.js:72:18)
    at Object.<anonymous> (C:\Users\W10\Desktop\newproject\node_modules\webpack\bin\webpack.js:156:2)
    at Module._compile (internal/modules/cjs/loader.js:1137:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1157:10)
    at Module.load (internal/modules/cjs/loader.js:985:32)
    at Function.Module._load (internal/modules/cjs/loader.js:878:14)
    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:71:12)
    at internal/main/run_main_module.js:17:47 {
  code: 'MODULE_NOT_FOUND',requireStack: [
    'C:\\Users\\W10\\Desktop\\newproject\\node_modules\\webpack-cli\\bin\\utils\\convert-argv.js','C:\\Users\\W10\\Desktop\\newproject\\node_modules\\webpack-cli\\bin\\cli.js','C:\\Users\\W10\\Desktop\\newproject\\node_modules\\webpack\\bin\\webpack.js'
  ]
}