问题描述
今天在学习vue单文件组件的打包，在运行 npm run build 打包出现报错。
ERROR in ./components/todoItem/index.js
Module not found: Error: Can't resolve './src/todoItem' in '*******'
@ ./components/todoItem/index.js 1:0-38 3:15-23
@ ./main.js
组件目录
components
└── todoItem
├── index.js
└── src
└── todoItem.vue
components/todoItem/index.js
import todoItem from './src/todoItem';
export default todoItem;
package.json
{
"name": "vue_without_teamplate",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack --config webpack.config.js",
"dev": "webpack-dev-server --open "
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"vue": "^2.6.11"
},
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^7.1.5",
"clean-webpack-plugin": "^3.0.0",
"html-webpack-plugin": "^4.0.2",
"vue-loader": "^15.9.1",
"vue-template-compiler": "^2.6.11",
"webpack": "^4.42.1",
"webpack-cli": "^3.3.11",
"webpack-dev-server": "^3.10.3"
}
}
webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
module.exports = {
mode: "development",
entry: {
app: './main.js'
},
output: {
path: path.join(__dirname, './dist'),
filename: '[name].bundle.js'
},
devServer: {
contentBase: './dist',
hot: true
},
module: {
rules: [
// ... 其它规则
{
test: /\.vue$/,
loader: 'vue-loader'
},
// 它会应用到普通的 `.js` 文件
// 以及 `.vue` 文件中的 `<script>` 块
{
test: /\.js$/,
loader: 'babel-loader'
},
]
},
plugins: [
new HtmlWebpackPlugin({
title: 'Output Management',
filename: 'index.html',
template: './index.html'
}),
new CleanWebpackPlugin(),
// 请确保引入这个插件！
new VueLoaderPlugin()
],
resolve: {
alias: {
'vue$': 'vue/dist/vue.js' // 用 webpack 1 时需用 'vue/dist/vue.common.js'
},
}
}
原因
问题的根源是在导入组件时没有指定文件扩展名。真是惭愧😥，使用脚手架构建项目，组件导入的时候都是不用拓展名的，却又没有深究为什么可以不适用拓展名。因为脚手架生成的配置文件中有对模块文件的扩展名的相关配置：
module.exports = {
//...
resolve: {
// 以下配置会将没指定拓展名的文件按如下类型查找匹配
extensions: [
//...
'.js', '.json','.vue'
]
}
};
解决方案
- 在导入文件的时候指定拓展名
components/todoItem/index.js
- import todoItem from './src/todoItem';
+ import todoItem from './src/todoItem.vue';
export default todoItem;
- 在webpack配置文件中配置
webpack.config.js
module.exports = {
//...
resolve: {
alias: {
'vue$': 'vue/dist/vue.js' // 用 webpack 1 时需用 'vue/dist/vue.common.js'
},
+ extensions: ['*', '.js', '.vue']
}
};
