javascript - 无法解析 webpack 中的 node

问题描述

我正在设置一个 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");

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

./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,
  render: (h) => h(App),
}).$mount("#root");

如何自动连接 node_modules？

标签： javascriptwebpackwebpack-4

javascript - 无法解析 webpack 中的 node_modules

问题描述

解决方案

推荐阅读