Webpack不能加载从Vue组件导入的.js类的原因是因为Vue组件的.js文件中使用了ES6的模块语法,而Webpack默认只能处理CommonJS规范的模块导入。
在Vue组件中,如果使用了ES6的模块语法导入一个*.js类,例如:
import MyClass from './myClass.js';
Webpack在处理这个导入语句时会报错,提示无法解析这个模块。
解决这个问题的方法有两种:
npm install babel-loader @babel/core @babel/preset-env --save-dev
然后,在Webpack的配置文件中添加babel-loader的配置:
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
}
]
}
这样,Webpack在处理*.js文件时会使用babel-loader来转译ES6的模块语法,使其能够被正确加载。
const MyClass = require('./myClass.js');
这样,Webpack就能够正确加载Vue组件中导入的*.js类。
总结起来,Webpack不能加载从Vue组件导入的*.js类是因为默认只能处理CommonJS规范的模块导入,可以通过使用babel-loader来处理ES6的模块语法,或者将导入语句改为使用CommonJS规范的导入方式来解决这个问题。
领取专属 10元无门槛券
手把手带您无忧上云