Webpack遇到的问题

最新推荐文章于 2024-09-02 18:32:37 发布

来点作用吧庄志淮

最新推荐文章于 2024-09-02 18:32:37 发布

阅读量257

点赞数

分类专栏：问题解决文章标签： webpack 前端 javascript

本文链接：https://blog.csdn.net/weixin_47177936/article/details/121699829

版权

问题解决专栏收录该内容

6 篇文章 1 订阅

订阅专栏

webpack ./src/main.js -o ./dist/bundle.js --mode=development

当我使用该指令时，生成的是bundle.js文件夹，然后在该文件下生成main,js，而并非直接是一个bundle.js文件。
在这里插入图片描述

我使用的webpack版本以及webpack-cli版本：
在这里插入图片描述

我的解决方法：

我加入了webpack.config.js文件

const path = require('path')

module.exports = {
    entry : './src/main.js', //这个是入口,按自己需要改，我这里的入口就是main.js
    output : {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js' //生成的文件名
    }
}

那么以上这段代码是需要依赖node包中的path包的
所以要先下载node包

npm i webpack webpack-cli -D

那么就会生成这个
在这里插入图片描述

然后直接使用

webpack

指令，就可以了

一些想法：

其实我是跟着B站上的老师学的，然后也是跟着B站上老师的顺序来的，那么在老师讲课的过程中没有创建这个webpack.config.js文件的，但是他打包后的就是bundle.js文件，那么我自己是找了很多文章，收集到的答案也是各式各样，由于我是刚出学webpack的，所以也无法确定对错，所以只能借助webpack.config.js文件，如果有大佬知道这个问题的源头是什么，还请不吝赐教。

那么其实我把我的webpack版本降到3.12.0的时候，其实就没有这个问题了…而且我在5.64.4这个版本看不到每一次打包的Hash值在这里插入图片描述
那么将版本下调之后

但是我个人还是建议还是用webpack5 或者webpack4 不然下载一些下载器的时候官方没有…