无法解析 webpack 中的 node_modules

Question

I am setting up a webpack, but I have a problem. I know that libraries are automatically connected when node_modules is set in modules of resolve. So I set up the webpack like this(the webpack file is located under the config folder in the root folder.)

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(),  
  ],
}

However, despite of this setting, code cannot find 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");

this prints out error message on the dev server or at build time.

ERROR in ./main.js Module not found: Error: Can't resolve 'vue' in '/Users/donghokim/study/wecode/vue-setting-playground/brandi-front-setting' @ ./main.js 1:0-22 5:4-7

However, if set the library path directly, it works.

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");

How can I automatically connect node_modules?

Answer 1

solved.... vue$: 'vue/dist/vue.runtime.esm-bundler.js' is of vue 3. I found that vue 2 has no vue.runtime.esm-bundler.js file. After changing to vue.runtime.esm.js, webpack build works