Question

我正在设置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, '../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？

Answer 1

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

无法解析Webpack中的node_modules

1 个答案: