无法解析Webpack中的node_modules

问题描述

我正在设置Webpack，但是有问题。 我知道在resolve模块中设置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,'node_modules',path.resolve(__dirname,'../node_modules')
    ],},resolveLoader: {  
    modules: [  
      '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','.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");

这会在开发服务器上或在构建时打印出错误消息。

./main.js中的

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

但是，如果直接设置库路径，它将起作用。

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

new Vue({
  router,}).$mount("#root");

如何自动连接node_modules？

解决方法

已解决。...vue $：'vue / dist / vue.runtime.esm-bundler.js'是vue3。我发现vue 2没有vue.runtime.esm-bundler.js文件。更改为vue.runtime.esm.js后，Webpack构建便可以正常工作