webpack无法解决node_modules问题

Question

我正在组建webpack，但我有个问题。我知道，在解析模块中设置node_modules时，库是自动连接的。所以我像这样设置webpack ( webpack文件位于根文件夹中的config文件夹下)。

const path = require('path');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

const env = process.env.NODE_ENV;
const isProd = env === "production";

module.exports = {
  mode: env,
  context: path.resolve(__dirname, '..'),
  entry: {
    app: './main.js'
  },
  output: {
    filename: !isProd ? `js/[name].js` : 'js/[name].[contenthash:8].js',
    path: path.resolve(__dirname, '../dist'),
    publicPath: '/',
    chunkFilename: !isProd ? `js/[name].js` : 'js/[name].[contenthash:8].js'
  }, 
  resolve: {
    alias: {
      '@': path.resolve(__dirname, '../src'),
      vue$: 'vue/dist/vue.runtime.esm-bundler.js'
    },
    extensions: [
      '.mjs',
      '.js',
      '.jsx',
      '.vue',
      '.json',
    ],
    modules: [  
      path.resolve(__dirname, '../src'),
      'node_modules',   
      path.resolve(__dirname, '../node_modules')
    ],
  },
  resolveLoader: {  
    modules: [  
      'node_modules',   
      path.resolve(__dirname, '../node_modules')
    ],
    extensions: ['.js', '.json'],
  },
  module: {
    noParse: /^(vue|vue-router|vuex|vuex-router-sync)$/,
    rules: [
      { 
        test: /\.vue$/, 
        use: ['vue-loader']
      },
      {
        test: /\.(png|jpe?g|gif|webp)(\?.*)?$/,
        use: [  
          { 
            loader: 'url-loader',   
            options: {  
              limit: 4096,  
              fallback: {   
                loader: 'file-loader',  
                options: {  
                  name: 'img/[name].[hash:8].[ext]',
                  esModule: false
                }   
              } 
            }   
          } 
        ]
      },
      {
        test: /\.(sa|sc|c)ss$/,
        use: [ isProd ? {
          loader: MiniCssExtractPlugin.loader
        } : {   
          loader: 'style-loader',
        }
        , 
        { 
          loader: "css-loader", 
          options: {    
            sourceMap: false,   
            importLoaders: 2    
          }
        }, 
        {
          loader: "sass-loader", 
          options: {    
            sourceMap: false    
          }
        }],
      },
      {
        enforce: 'pre',
        test: /\.(vue|(j|t)sx?)$/,
        exclude: [
          /node_modules/,
        ],
        use: [
          {
            loader: 'eslint-loader',
            options: {
              extensions: [
                '.js',
                '.jsx',
                '.vue'
              ],
              emitWarning: false,
              emitError: false,
              fix: true,
            }
          }
        ]
      },
      {
        test: /\.m?jsx?$/,
        use: [
          {loader: 'babel-loader'}
        ]
        
      }
    ],
  },
  plugins: [
    new VueLoaderPlugin(),  
  ],
}

但是，尽管存在此设置，代码仍无法找到node_modules。

import Vue from 'vue';
import App from "./src/App.vue";
import { router } from "./src/router/index.js";

new Vue({
  router,
  render: (h) => h(App),
}).$mount("#root");

这将在dev服务器上或在构建时输出错误消息。

找不到./main.js模块中的错误：'/Users/donghokim/study/wecode/vue-setting-playground/brandi-front-setting‘@ ./main.js 1:0-22 5:4-7中的错误:无法解析“vue”

但是，如果直接设置库路径，它就能工作。

import Vue from './node_modules/vue/dist/vue';
import App from "./src/App.vue";
import { router } from "./src/router/index.js";

new Vue({
  router,
  render: (h) => h(App),
}).$mount("#root");

如何自动连接node_modules？

Answer 1

解决了..。vue$：' vue /dist/ vue.runtime.esm-bundler.js‘是vue 3，我发现vue 2没有vue.runtime.esm-bundler.js文件。改为vue.runtime.esm.js后，webpack建厂