开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

webpack不生成bundle.js？

webpack是一个现代化的前端构建工具，用于将多个模块打包成一个或多个bundle.js文件。但是，如果webpack没有生成bundle.js文件，可能是由于以下几个原因：

配置错误：首先，需要检查webpack的配置文件（通常是webpack.config.js）是否正确配置。确保入口文件（entry）和输出文件（output）的路径和文件名设置正确。
缺少依赖：如果webpack配置正确，但仍然没有生成bundle.js文件，可能是由于项目中缺少必要的依赖。可以通过运行npm install或yarn install来安装项目所需的依赖。
编译错误：如果项目中存在语法错误或其他编译错误，webpack可能无法生成bundle.js文件。在开发过程中，可以使用开发者工具（如Chrome开发者工具）来检查是否有任何错误信息，并及时修复它们。
文件路径错误：如果项目中的文件路径设置不正确，webpack可能无法找到需要打包的模块。确保在webpack配置文件中正确设置了模块的路径。
插件问题：某些webpack插件可能会干扰bundle.js的生成。可以尝试禁用一些插件，然后重新运行webpack，看看是否生成了bundle.js文件。

总结起来，如果webpack没有生成bundle.js文件，需要检查配置文件、依赖、编译错误、文件路径和插件等方面的问题。根据具体情况进行排查和修复。

关于webpack的更多信息和使用方法，可以参考腾讯云的Webpack产品介绍页面：Webpack产品介绍

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

webpack4 入门

/lilugirl/learn-webpack4/tree/master/3 用webpack编译index.js文件生成目录dist和main.js文件使用CommonJS的模块引入方式打包源码 https.../index.js', output: { filename: 'bundle.js', path: path.resolve(__dirname, 'bundle') } }...如果将webpack配置项重的mode 设为 development 打包的文件生成的js将不会被压缩 const path = require('path'); module.exports =.../src/index.js', output: { filename: 'bundle.js', path: path.resolve(__dirname, 'dist') }...对url-loader 增加limit配置可以针对图片大小自动选择打包方案，如果图片不超过指定大小就打包成base64图片，如果图片超过指定大小自动按照file-laoder打包。

5183 0

Vue 07.webpack

安装到项目依赖中 npm install webpack webpack-cli --save-dev npx webpack -v 通过查看版本看是否安装成功不推荐全局安装webpack.../main.js -o dist/bundle.js --mode development webpack3 webpack src/js/main.js dist/bundle.js webpack配置文件...终端执行npm run dev发现可以进行实时打包，但是dist目录下并没有生成bundle.js文件，这是因为webpack-dev-server将打包好的文件放在了内存中把bundle.js放在内存中的好处是...这个插件的两个作用：自动在内存中根据指定页面生成一个内存的页面自动把打包好的 bundle.js 追加到页面中去由于使用--contentBase指令的过程比较繁琐，需要指定启动的目录。...'path'); // 导入自动生成HTMl文件的插件 const htmlWebpackPlugin = require('html-webpack-plugin'); module.exports

7682 0

webpack使用来打包前端代码

o dist/bundle.js 注意如果提示没有webpack-cli,安装: npm install webpack-cli -g index.html: <script src="....."指令，发现可以进行实时打包，但是dist目录下并没有生成bundle.js文件，这是因为webpack-dev-server将打包好的文件放在了内存中把bundle.js放在内存中的好处是：由于需要实时打包编译...： "dev": "webpack-dev-server --contentBase src" 同时修改index页面中script的src属性为

1.3K1 0

webpack生成雪碧图案例

使用到的插件是: webpack-spritesmith 依赖项: "webpack-spritesmith": "^1.1.0" "webpack": "^4.29.6" "webpack-cli"...: "^3.3.0" 预设命令: "build:dev": "npx webpack --mode development" "build:prod": "npx webpack --mode production.../src/ico'), // 图片类型 glob: '*.png' }, // 生成的文件夹路径 target: { image: path.resolve(__dirname...cssImageRef: "sprite.png" }, spritesmithOptions: { // 设置图片间的内边距 padding: 20 }, // 自定义生成模板.../src/ico'), // 图片类型 glob: '*.png' }, // 生成的文件夹路径

5212 0

Webpack 详解

一旦脚本经历了成功，你可以看到 DIST / bundle.js 在飞行中不生成的文件，但在你真正的创建 DIST / 文件夹。剩下的唯一事情就是现在将 dist / 文件夹上传到Web服务器。...这将意味着我们自动生成的 dist / bundle.js 文件将被删除（好），而我们手动实现的 dist / index.html 文件将被删除（不好）。...我们不想为每个Webpack构建都手动重新创建此文件。为了自动生成 dist / index.html 文件，我们可以使用Webpack插件。...某人获得您的项目的副本后，该人可以执行npm run build以生成文件。_ Webpack source map Webpack捆绑了所有JavaScript源代码文件。...:2:18) at Object.0 (bundle.js:480) at __webpack_require__ (bundle.js:20) at bundle.js:84

6.2K2 0

深入了解Webpack

一旦脚本经历了成功，你可以看到 DIST / bundle.js 在飞行中不生成的文件，但在你真正的创建 DIST / 文件夹。剩下的唯一事情就是现在将 dist / 文件夹上传到Web服务器。...这将意味着我们自动生成的 dist / bundle.js 文件将被删除（好），而我们手动实现的 dist / index.html 文件将被删除（不好）。...我们不想为每个Webpack构建都手动重新创建此文件。为了自动生成 dist / index.html 文件，我们可以使用Webpack插件。...某人获得您的项目的副本后，该人可以执行npm run build以生成文件。_ Webpack source map Webpack捆绑了所有JavaScript源代码文件。...:2:18) at Object.0 (bundle.js:480) at __webpack_require__ (bundle.js:20) at bundle.js:84

6.8K7 5

《webpack5 实战五》之资源模块

文件loader 配置执行webpack 打包结果 inline 资源模式 1、引入 jpeg 文件 2、webpack.config 配置 3、引入、打包验证结果 4、自定义 data URI 生成器...例子过程描述：项目里加入img1.png 文件 webpack 配置loader ，将png 打包到指定目录 bundle.js 自动引入打包之后的图片路径 1、引入图片这里添加img1 图片...test: /\.png/, type: 'asset/resource' } } 指定图片打包之后的文件夹，如果不指定默认打包到根目录。...打包后的结果：自定注入bundle.js 里： 4、另外一种输出文件名的方式以html 文件为例，所有的html 文件都会被输出到static 目录下： webpack.config 文件loader...' }, 3、引入、打包验证结果图片变成了base64 出现在bundlle.js 里 4、自定义 data URI 生成器 webpack 输出的 data URI，默认是呈现为使用

7395 0

基于webpack，不使用任何脚手架，创建纯粹的webpack项目

明确webpack的实现原理，不掺杂其他的脚手架之类的东西会更直白，更有力。...根据引导提示，完善包名、版本、描述、入口文件等信息，也可以直接回车跳过，暂时不填。完成之后项目根目录下有且仅由一个package.json文件。.../main.js', output:{ filename:'bundle.js', path:path.resolve(__dirname,'.....在上述步骤完成之后，在当前工程的根目录下打开终端，运行 npm run build 就能基于 webpack 生成上述步骤 ③ 中配置的 output 属性下的 filename 对应的文件，如下：...⑤浏览器打开 index.html 后就能够得到如下结果：下一篇文章详细描述 webpack 生成 bundle.js 的详细过程。

5955 0

Vue webpack的基本使用

，但是dist目录下并没有生成bundle.js文件，这是因为webpack-dev-server将打包好的文件放在了内存中。...image-20200303082840795 3.4.4 配置以打补丁生成压缩文件的热更新模式 --hot 目前每当我们修改一下main.js中的代码，都是完整生成一个新的bundle.js，如下：...3.6 使用html-webpack-plugin插件配置启动页面前面在配置生成bundle.js的使用时候，已经将其存储在内存中编译生成。...image-20200303233906249 这个插件的两个作用：自动在内存中根据指定页面生成一个内存的页面自动，把打包好的 bundle.js 追加到页面中去 3.7 使用webpack打包css...[ext]' }, 参数说明： [name] 显示源文件的名称 [ext] 显示源文件的文件后缀名，不设置则统一转为 jpg 格式。那么配置之后，再来运行服务，浏览器查看如下： ?

1.5K2 0

也来说说webpack

入门 webpack，官方定位是一个模块打包工具，基础命令极其简单 JavaScript webpack ./entry.js bundle.js 1 webpack ..../entry.js bundle.js 在CLI模式中，第一个参数是入口文件，第二个参数是输出文件，并读取当前cwd目录下面的webpack.config.js配置，根据配置生成对应的bundle.js...如果想做一个库\框架去为生态提供服务，也可以立即选择webpack，他能自动配置最终生成的library.js文件支持AMD\CommonJS等模块化方案。...其实对于老业务而已，仅仅将JS的模块化从RequireJS替换到webpack，其收益并不明显，仅仅是最后生成的JS文件要小一些而已。...别忘了，webpack的REPL可是完整的nodejs，也就是说Grunt、Gulp能做的事情，webpack也能做（只是能做，不代表webpack擅长做）。

4500 0

深入了解Webpack 5

一旦脚本经历了成功，你可以看到 DIST / bundle.js 在飞行中不生成的文件，但在你真正的创建 DIST / 文件夹。剩下的唯一事情就是现在将 dist / 文件夹上传到Web服务器。...这将意味着我们自动生成的 dist / bundle.js 文件将被删除（好），而我们手动实现的 dist / index.html 文件将被删除（不好）。...我们不想为每个Webpack构建都手动重新创建此文件。为了自动生成 dist / index.html 文件，我们可以使用Webpack插件。...某人获得您的项目的副本后，该人可以执行npm run build以生成文件。 Webpack source map Webpack捆绑了所有JavaScript源代码文件。...:2:18) at Object.0 (bundle.js:480) at __webpack_require__ (bundle.js:20) at bundle.js:84

3.5K3 0

【前端技术】Webpack基础

/src/index.js'), // 入口 output: { // 把所有依赖的模块合并输出到一个 bundle.js 文件 filename: 'bundle.js',...只会生成bundle.js文件步骤一：安装url-loader npm install url-loader --save-dev 步骤二：修改配置webpack.config.js文件 const...[ext]', outputPath:'imgs/', limit:20480 // 如果图片文件大于20KB,就会单独生成 XXX.jpg...体积很大 -》 index.html加载 bundle.js时间就会很长图片很大 -》 file-loader -> 单独生成 XXX.jpg文件 -》 index.html 引入XXX.jpg文件...-》 bundle.js 体积就会很小 -》页面加载快图片很小 -》 file-loader -> 单独生成 XXX.jpg 文件 -》多发送一次HTTP请求图片很小 -》 url-loader

7141 0

Webpack笔记

使用 Webpack 2.1 使用步骤安装， npm install webpack webpack-cli -D 编辑配置文件(webpack.config.js) const path = require...__dirname, "src", "index.js"), mode: "development", output: { filename: "bundle.js", path...源代码： let add = (a, b) => a + b; 转换后的： 2.4.4 生成 HTML 安装依赖 npm install html-webpack-plugin -D 配置。...：代码没有被用到代码只读不写 Dead Code 例子：没有使用 Tree-Shaking 时：修改配置文件，开启 Tree-Shaking：结果： 2.5 更多功能缓存 Sourcemap...return source; // 此时的source是指经loader处理后的source(不处理则是原来的source，如eslint-loader) }; 3.3.2 开始动手目录结构 index.js

3435 0

Webpack插件按需加载组件_webpack懒加载

—— 摘自《webpack——懒加载》上面这段话，用一句俗语讲就是“占着茅坑不拉屎”。先占着茅坑，屎意来的时候再来！...打开bundle.js，可以看到con.js代码被嵌入bundle.js 接下来，使用import()引入con.js： /* main.js */ // 这里使用import()引入con.js...通过这个注释，再配合webpack.config.js的output.chunkFilename，我们可以设置打包生成的文件(chunk)的名字。...再说明一点： webpack 打包生成的chunk有一下几种： webpack当中配置的入口文件（entry）是chunk，可以理解为entry chunk；入口文件以及它的依赖文件通过code...本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至举报，一经查实，本站将立刻删除。

1.4K2 0

webpack的watch选项不工作原因分析

使用vue-cli创建项目因为以前用过webpack，而vue-cli创建的项目底层其实还是使用webpack构建的，所以使用起来还是很简单的。...，更不会reload浏览器页面，webpack的watch选项失效了。...在网上搜索了下原因，发现webpack的一个issue项。...继续翻查资料，终于在webpack的官方文档中找到说明https://webpack.github.io/docs/troubleshooting.html#watching。...但这样webpack检测文件变动的原来逻辑就不工作了。代码见webpack/lib/node/NodeWatchFileSystem.js。

4K6 0

webpack 使用笔记

全局方式安装，打包安装 npm i webpack -g 打包文件 webpack a.js bundle.js //a.js 入口文件 //生成bundle.js 项目的方式打包生成项目 npm...init -y 项目内安装 npm i webpack -D 打包文件 node_modules/.bin/webpack a.js bundle.js 或定义命令 ?...执行命令 npm run pack 通过webpack.config.js文件生成打包文件 ? ?.../js/signup.js', }, output:{ filename:'[name].bundle.js', path:__dirname+'/dist', } } 执行...npm run pack ，定义了两个入口文件，也相应生成两个dist文件使用loader加载css等其它资源文件首先安装css-loader和style-loader npm i css-loader

3402 0

【前端技术】Plugin的使用

一、html-webpack-plugin 作用：为html文件中引入的外部资源如script、link动态添加每次compile后的hash，防止引用缓存的外部文件问题可以生成创建html入口文件...，比如单页面可以生成一个html文件入口，配置N个html-webpack-plugin可以生成N个页面入口原理：将 webpack中entry配置的相关入口chunk 和 extract-text-webpack-plugin...1.1 安装插件 npm install --save-dev html-webpack-plugin npm run build 之后，就会生成dist文件，但是这个文件中有index.html。.../src/index.js'), // 入口 output: { // 把所有依赖的模块合并输出到一个 bundle.js 文件 filename: 'bundle.js',...说明如果output不设置filename的话，打包的时候，会拿entry.main的key值当做filename。 3.2 两个入口 entry: { main:'.

4751 0

webpack学习之入门实例

> 这里我们直接引入了bundle.js文件，该文件尚未定义，这个是entry.js文件经过webpack打包后生成的文件，这里先这么引入即可。...7、webpack打包：首先安装loaders打包工具： npm install css-loader style-loader --save webpack打包时会自动识别文件之间的依赖关系，直接生成单个文件...webpack自动为我们生成了一个bundle.js文件以及打包后的样式文件，打开index.html文件效果如下： ?...webpack已经打包生成的文件，之后的文件目录如下： ?...接下来直接使用以下命令打包生成： webpack 执行效果： ? index.html效果同上。。。

6850 0

Webpack（一）：安装和基础配置

Node.js\node_global PS：第二个貌似也可以设置为 D:\Node.js\node_global\node_modules image.png 之后重启 cmd （一定要重启，不然是不生效的...2.创建 index.html 文件和 src 文件夹，后者存放打包前的文件 3.通过 npm init 生成 package.json 文件，这个文件用来描述项目信息以及依赖配置等。.../src/main.js', output:{ path:path.resolve(__dirname,'dist'), filename:'bundle.js'.../dist/bundle.js 会发现项目文件夹下多出来一个dist文件夹，里面有一个打包生成的 bundle.js文件： image.png 之后在 index.html 中直接引用该文件：浏览器跑一下，没毛病。

2.6K2 0

抛开vue-cli，一步步搭建vue+webpack环境

），在此目录下打开终端，输入npm init，目录下生成一个package.json 2、剩下文件自己新建，目录结构如下： ├── dist // │ ├── bundle.js//打包后生成的 ├...── node_modules // npm包安装后生成的 ├── src // 静态资源文件 │ ├── components //vue组件 │ │ └── nav.vue │...手动在dist里建一个index.html，引用最后打包的bundle.js，才能显示出来 \\index.html 思考：怎么让html自动生成，并引用相应的js呢？...component名称不能与 HTML 元素或者 Vue 保留标签重名，不区分大小写。可以发现，只检查了常用的 HTML 元素，还有很多元素没有检查，例如 button、main。

5571 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭