webpackでvue環境を構築する際の異常なエラーを解決する

//npm init -y を自動設定する

npm で webpack をインストールします。webpack-cli --save-dev
  //またはnpm i webpack webpack-cli -DでもOK

スロー: modules.exports
インポート: 必要

'' から xxx をインポート
エクスポートデフォルト {}

cnpm と babel-loader @babel/core @babel/preset-env -D

npm i css-loader スタイルローダー -D
cnpm i css-loader スタイルローダー -D

npm と html-webpack-plugin -D を実行します。
cnpm と html-webpack-plugin -D

module.exports = { エントリ:'./src/index.js' }

定数パス = require('path');
      モジュール.エクスポート = {
          // ...
          出力: {
              パス: path.resolve(__dirname, 'dist'),
              ファイル名: 'main.js'
          }
      }

モジュール.エクスポート = {
    // ...
    モジュール:{
        ルール:[
            {
                テスト: /\.css$/,
                使用:['style-loader','css-loader']
            },
            {
                test: /\.js?$/, // jsx/js ファイルの正規表現 exclude: /node_modules/, // node_modules フォルダーを除外 use:{
                    // ローダーは babel です
                    ローダー: 'babel-loader',
                    オプション:
                        // babel エスケープ設定オプション babelrc: false,
                        プリセット: [
                            [require.resolve('@babel/preset-env'), {モジュール: false}]
                        ]、
                        キャッシュディレクトリ: true
                    }
                }
            }
        ]
    }
}

HtmlWebPackPlugin は 'html-webpack-plugin' を必要とします。
モジュール.エクスポート = {
	// ...
	プラグイン:[
		新しいHtmlWebPackプラグイン({
			テンプレート: 'public/index.html',
			ファイル名: 'index.html',
			注入: 真
		})
	]
}

npx webpack --mode 開発

//package.jsonファイルにビルド項目を追加{
    「スクリプト」: {
        "ビルド": "webpack --mode プロダクション"
    }
}

npm 実行ビルド

cnpm と webpack-dev-server -D

モジュール.エクスポート = {
          // ...
          開発サーバー: {
              コンテンツベース: './dist',
              ホスト: 'localhost',
              ポート: 3000
          }
      }

{
    「スクリプト」: {
        "開始": "webpack-dev-server --mode 開発 --open"
    }
}

npm スタート

vue-loader: vue ファイルを解析する vue-template-compiler

      インストール: npm install vue-loader vue-template-compiler -D
      webpack ファイルを設定します: {test:/\.vue$/,use:['vue-loader']},

      vueLoaderPlugin プラグインをインスタンス化します。const { VueLoaderPlugin } = require('vue-loader')
      プラグインのインスタンス化を追加します。
       },
          プラグイン: [
              新しい VueLoaderPlugin()
          ]

インストール: npm install less-loader less -D
構成：
 モジュール: {
        ルール:
            {test:/\.less$/,use:['style-loader','css-loader','less-loader']},
        ]
    },

インストール: npm install sass-loader node-sass -D
構成：
 モジュール: {
        ルール:
            {test:/\.(scss|sass)$/、use:['style-loader','css-loader','sass-loader']}、
        ]
    },

インストール: npm install vue-router -D