报错内容
报错原因
webpack4.x和webpack5.x中,有如下约定:
1.默认打包入口文件为src/index.js
2.默认输出文件路径为dist/main.js
解决办法
1.将对应文件名改为上述两个文件名;
2.在webpack.config.json
文件中自定义打包的入口和出口
//1.导入path
const path = require('path')
//使用Node.js中的导出语法,向外导出一个webpack的配置对象
module.exports = {
//mode代表webpack运行的模式,可选值有development(开发模式)和production(生产模式)
mode: 'development',
//2.在module中加入entry和output属性
//3.entry属性指定打包入口,这里自定义打包文件的名称为index1.js
entry: path.join(__dirname, './src/index1.js'),
//4.output属性指定打包出口
output: {
//这里的path是output的属性,代表存放的目录位置
path: path.join(__dirname, 'dist'),
//自定义生成的文件名(默认为main.js)
filename: 'bundle.js'
}
}
重新执行npm run dev
命令就可以看到新生成的dist文件夹下面有一个叫bundle.js
的文件;最后将html文件的引入文件修改成bundle.js
文件即可正常运行页面;