开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

在现有的普通JS项目中使用Webpack会导致` `Cannot GET /` error

在现有的普通JS项目中使用Webpack会导致Cannot GET / error的问题是因为Webpack默认将所有的资源打包到一个输出文件中，这个文件的路径并不是我们所期望的根路径。解决这个问题可以通过配置Webpack的output路径来指定输出文件的位置。

具体的解决方法如下：

确保在项目根目录下已经安装了Webpack。可以使用以下命令进行安装：

npm install webpack --save-dev

在项目根目录下创建一个名为webpack.config.js的文件，并在该文件中进行Webpack的配置。以下是一个基本的配置示例：

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  mode: 'development'
};

这个配置中，entry指定了项目的入口文件，output指定了输出文件的名称和路径，mode指定了Webpack的打包模式。

在项目根目录下运行以下命令来打包项目：

npx webpack

这会生成一个名为bundle.js的输出文件，并放置在dist文件夹下。

在项目根目录下创建一个名为index.html的文件，并在该文件中引入打包后的bundle.js文件。以下是一个简单的示例：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>My App</title>
</head>
<body>
  <script src="dist/bundle.js"></script>
</body>
</html>

这个文件中，<script>标签的src属性指定了引入的打包后的bundle.js文件的路径。

在项目根目录下启动一个本地服务器，以便访问项目。可以使用一些简单的服务器工具，例如http-server。以下是一个使用http-server的示例命令：

npx http-server

启动服务器后，可以通过浏览器访问http://localhost:8080来查看项目。

这样配置后，Webpack会将项目中的JS文件打包成一个单独的bundle.js文件，并将其放置在dist文件夹下。通过引入该文件，浏览器可以正确加载项目中的JS代码，解决了Cannot GET / error的问题。

如果你在腾讯云上进行开发，推荐使用腾讯云提供的云开发服务SCF（Serverless Cloud Function）来进行部署和托管。SCF提供了无服务器的应用架构，具备高可扩展性和高弹性。你可以使用SCF的云函数来托管你的应用程序，并通过API网关进行访问。具体的腾讯云SCF产品信息和介绍可以参考：腾讯云云函数SCF

此外，如果你的项目需要更复杂的前端构建工具和功能，你可以考虑使用腾讯云的云开发服务Tencent CloudBase，它提供了一体化的云上前后端一体化开发体验，包括静态网站托管、云函数部署、数据库存储等功能。具体的腾讯云CloudBase产品信息和介绍可以参考：腾讯云云开发CloudBase

注意，以上提到的腾讯云产品只是作为参考，你可以根据实际需求选择适合自己项目的云计算服务商。

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

有帮助

没帮助

相关·内容

Vue2.0 新手完全填坑攻略——从环境搭建到发布

使用路由搭建单页应用之前已经通过命令安装了vue-router cnpm install vue-router --save 在webpack.config.js加入别名 resolve: {...webpack.config.js 中的 loaders 数组加入以下配置，记得该加逗号的地方加逗号!...', 'stage-0'] } 或者在webpack.config.js中这里 { test: /\\\\.js$/, loader: 'babel',...webpack.config.js 中的 loaders 数组加入以下配置，记得该加逗号的地方加逗号!...', 'stage-0'] } 或者在webpack.config.js中这里 { test: /\\\\.js$/, loader: 'babel',

1.8K5 0

webpack、npm 相关错误汇总

（2）Error: Cannot find module 'webpack/bin/config-yargs’ 原因：webpack和webpack-dev-server版本不匹配。...解决：降低webpack版本先删除node_modules目录及文件，然后在项目根目录下执行卸载命令：cnpm uninstall webpack，最后重新安装较低版本的webpack：cnpm install...npm run dev （9）Module not found: Error: Cannot resolve ‘file’ or ‘directory’ 原因：webpack版本太老或者项目使用的是webpack-simple...解决：更改webpack版本 (10) Error: HtmlWebpackPlugin: could not load file F:…\asset\favicon.ico 在单页面应用中的index.html...解决方法：使用ipconfig/ifconfig查看本机IP，将webpack中index.js的 host 改成本机IP，如果本机IP是DHCP分配的，那么host每次都需要改成对应的本机IP。

2.5K3 0

React router动态加载组件-适配器模式的应用

在简单的单页应用中，这样写是ok的。因为打包后的单一js文件bundle.js也不过200k左右，gzip之后，对加载性能并没有太大的影响。...但是，当产品经历多次迭代后，追加的页面导致bundle.js的体积不断变大。这时候，优化就变得很有必要。二、如何优化优化使用到的一个重要理念就是——按需加载。...，就是利用webpack的code splitting功能（webpack1使用require.ensure，webpack2/webpack3使用import），将代码进行分割。...=> { /*eslint-disable*/ console.error('cannot load Component...[chunkhash].js') } 在输出项中，增加chunkFilename即可。四、小结自定义高阶组件的好处，是可以按最少的改动，来优化已有的旧项目。

1.8K3 0

webpack、npm 错误汇总

原因：版本10 fs.promises的API是实验性的，webstorm不允许使用。解决：卸载掉原有node.js，重新安装node.js 8版本。...（2）Error: Cannot find module ‘webpack/bin/config-yargs’ 原因：webpack和webpack-dev-server版本不匹配。...解决：降低webpack版本先删除node_modules目录及文件，然后在项目根目录下执行卸载命令：cnpm uninstall webpack，最后重新安装较低版本的webpack：cnpm install...方法二：在代码中使用err对象，如下： console.log('err:' + err); （8）npm ERR!...npm run dev （9）Module not found: Error: Cannot resolve ‘file’ or ‘directory’ 原因：webpack版本太老或者项目使用的是webpack-simple

2.7K7 1

react Cannot find module node_modules_react-scriptsconfigwebpack.config.dev

:589 throw err; ^ Error: Cannot find module 'D:\my_project\node_modules\react-scripts/config...\AppData\Roaming\npm-cache\_logs\2019-01-19T10_56_58_751Z-debug.log 经过四处寻找，在github找到了原因解释，只不过他的解释是针对使用了...ts下的react项目，但是原理相同内容如下 This has been caused by recent changes to CRA (2.1.2) where they merged the webpack.config.dev.js...and webpack.config.prod.js into a single file webpack.config.js....，所以通过git版本回退找到了以前的代码的package.json中react_script的使用版本是2.0.3，所以将版本也固定在了2.0.3 删掉node_modules目录，重新执行npm install

1K2 0

npm run dev启动报错：TypeError: Cannot read property upgrade of undefined

@3.11.2@webpack-dev-server\lib\Server.js:135:47) at Array.forEach () at new Server...，也就是给vue.config.js增加了devServer之后，启动项目报错：Vue ERROR TypeError: Cannot read property ‘upgrade’ of undefined...这个错误实际上时因为代理地址为空导致的，检查后发现proxy属性中的target的值为空，没有填入，填入后解决错误！...通俗一点就是： 1：开发环境：项目尚且在编码阶段，我们的代码一般在开发环境中不会在生产环境中，生产环境组成：操作系统，web服务器，语言环境。 php 。数据库。...等等 2：测试环境：项目完成测试，修改bug阶段 3：生产环境：项目数据前端后台已经跑通，部署在阿里云上之后，有客户使用，访问，就是网站正式运行了不管是在开发环境还是在生产环境里面代理路径需要统一一下

7K1 0

Vue动态组件的实践与原理探究

ps.本文项目使用Vue CLI创建，所用的Vue版本为2.6.11，webpack版本为4.46.0。...创建项目首先使用Vue CLI创建一个项目，在src目录下新建一个widgets目录用来存放小部件：一个小部件由一个Vue单文件和一个js文件组成：测试组件index.vue的内容如下： <template...项目的App.vue组件我们用来作为小部件的开发预览和测试，效果如下：小部件的配置会影响包裹小部件容器的边框颜色。...打包小部件假设我们的小部件已经开发完成了，那么接下来我们需要进行打包，把Vue单文件编译成js文件，打包使用的是webpack，首先创建一个webpack配置文件： webpack的常用配置项为：entry...方法里就会走下图的第一个if分支：也就是我们普通注册的组件会走的分支，如果我们传给is的是选项对象，相对于普通组件，其实就是少了一个根据组件名称查找选项对象的过程，其他和普通组件没有任何区别，至于模板编译阶段对它的处理也十分简单

1.1K1 0

一步一步带你搭建一个“摩登”的前端开发环境

造成这样结果的原因有多样，而其中之一的原因，是由于 js 缺乏类型系统，导致我们无法通过工具来在开发的过程中检测到那些可能会发生的错误，也无法通过具体的类型定义来约束别人如何调用自己写的代码库。...flow 通过自动推断 js 代码中各个变量的类型，来约束代码的行为，举个例子，在 js 中对两个变量进行相加，在不同情况下会得到不一样的结果： let strA = "hello "; let strB...param type of function hello(val: string): string { ^^^^^^ string flow 环境的搭建要在项目中使用.../node_module/.bin/flow stop 到现在为止，虽然 flow 已经可以正常运行了，然而因为我们在 js 代码里添加了额外类型声明，导致 js 代码不能直接在浏览器里执行，这时候我们需要做第三步...这里我使用的编辑器是 sublime text3，如果有的同学是使用其他编辑器，可以在这里，找一下对与像我一样使用 st3 的同学，首先我们要在 st3 里安装 SublimeLinter 插件，Ctrl

2.5K0 0

你可能不知道的9条Webpack优化策略

❝thread-loader 和 happypack 对于小型项目来说打包速度几乎没有影响，甚至可能会增加开销，所以建议尽量在大项目中采用。 ❞ 多进程并行压缩代码 ?...DLLPlugin 插件是在一个额外独立的webpack设置中创建一个只有dll的bundle，也就是说我们在项目根目录下除了有webpack.config.js，还会新建一个webpack.dll.js...这个插件是在webpack.config.js中使用的，该插件的作用是把刚刚在webpack.dll.js中打包生成的dll文件引用到需要的预编译的依赖上来。什么意思呢？...就是说在webpack.dll.js中打包后比如会生成 vendor.dll.js文件和vendor-manifest.json文件，vendor.dll.js文件包含了所有的第三方库文件，vendor-manifest.json...怎么在项目中使用？

1.8K3 1

了解webpack

React.js+WebPack Vue.js+WebPack AngluarJS+WebPack 什么是WebPack？...在3.0出现后，Webpack还肩负起了优化项目的责任。这段话有三个重点：打包：可以把多个Javascript文件打包成一个文件，减少服务器压力和下载带宽。...转换：把拓展语言转换成为普通的JavaScript，让浏览器顺利运行。优化：前端变的越来越复杂后，性能也会遇到问题，而WebPack也开始肩负起了优化和提升性能的责任。...这会将您项目中的 webpack 锁定到指定版本，并且在使用不同的 webpack 版本的项目中，可能会导致构建失败。对项目目录进行安装全局安装完成后，我们还要进行一个项目目录的安装。...npm install --save-dev webpack // 安装项目目录这里的参数–save是要保存到package.json中，dev是在开发时使用这个包，而生产环境中不使用。

6430 0

webpack3.0升级4.0

总结 1.webpack 3.11升级4.26 为了提升打包效率，在webpack3.11基础之上做了升级，webpack4.0发布以来，零配置的webpack对项目本身提供的“打包”和“压缩”功能已经做了优化...，如果在项目开始使用4.0而不用vue-cli的默认配置，遇到的问题或许能少一些。...安装/升级依赖这些依赖有的是在build过程中发现依赖有新的替换或者报错，逐步替换的，如果想遇到多个坑，可以先把webpack、webpack-cli升级到对应版本 devDependencies:...} = require('vue-loader') module.exports中添加 plugins:[new VueLoaderPlugin()] 修改配置文件 webpack.prod.conf.js...[contenthash].css'), allChunks: false, }), build出错：ERROR in TypeError: Cannot read property

4862 0

【Scratch入门到精通】使用CRA搭建项目

构建配置在config-overrides.js配置中，把scratch相关源码路径，添加到babel构建路径中。...自定义loader 由于create-react-app默认的webpack配置中，有规则会使scratch-render加载vert/frag文件时出现错误，经过分析对比，最终使用自定义vert-frag-loader.js...错误问题表象启动项目后，在浏览器端会出现twgl.js报错。..."; *** Error compiling shader: ERROR: 0:2: 'export' : syntax error twgl-full.js:2717 Uncaught TypeError...初始化虚拟机在文件scratch-example/src/store/vm.js中实现初始化工作。

1.5K2 0

5-12 webpack 性能优化（3）

在 worker 池(worker pool)中运行的 loader 是受到限制的。例如：这些 loader 不能产生新的文件。...7.3.1 webpack-parallel-uglify-plugin（webpack3使用）如果使用 webpack4，就不用关注这个了。...Only matching files get minified. // Defaults to /.js$/, any file ending in .js....uglifyJS: { // These pass straight through to uglify-js@3. // Cannot be used with uglifyES...而且用法很简单，webpack4 支持在 optimization 配置中指定压缩插件。

1.4K5 0

鹅厂原创 | Web前端踩坑记--静态资源优化总结

我们在平时开发的时候，JS脚本文件和CSS样式文件中的代码，都会依据一定的代码规范（比如javascript-standard-style）来提高项目的可维护性，以及团队之间合作的效率。...但是在项目发布现网后，这些代码是给客户端（浏览器）识别的，此时代码的命名规范、空格缩进都已没有必要，我们可以使用工具将这些代码进行混淆和压缩，减少静态文件的大小这里我们选择使用Webpack，具体会在后面介绍...2.2 文件合并在npm流行的今天，前端在进行项目开发的时候，往往会使用很多第三方代码库，比如jQuery，axios，weixin-js-sdk，lodash，bootstrap等等，每个库都有属于自己的脚本或者样式文件...、css文件进行gzip压缩，执行打包代码后生成结果文件如下：我们可以看到除了原有的js和css文件外，我们还得到了压缩后的gz文件。...[hash].css文件中，所有js逻辑代码按照业务逻辑和第三方库被抽离到了app.[hash].js和vendor.[hash].js文件中。

4611 0

前端异常的捕获与处理

对于前端来说，异常虽然不会导致计算机宕机，但是往往会导致用户的操作被阻塞。虽然异常不可完全杜绝，但是我们有充分的理由去理解异常、学习处理异常。异常处理在程序设计中的重要性是毋庸置疑的。...所以，在考虑浏览器兼容性时，最好还是只使用 message 属性。执行 JS 期间可能会发生的错误有很多类型。每种错误都有对应的错误类型，而当错误发生的时候就会抛出响应的错误对象。...try { // 可能会导致错误的代码 } catch (error) { // 在错误发生时怎么处理 } 如果 try 块中的任何代码发生了错误，就会立即退出代码执行过程，然后执行 catch...但是，很多时候有一些问题，我们在测试中并未发现，可是在线上却有部分人出现了，问题确确实实存在的，这个时候我们测试环境又不能重现，还有一些偶现的生产的偶现问题，这些问题都很难定位到问题的原因，让我们前端工程师头疼不已...政采云当前使用的是 Sentry 的开源版本，并结合业务进行一些改造：与构建系统结合，构建项目时自动生成 Sentry 项目，注入 Sentry 脚本客服端注入 Sentry 客户端脚本后，按项目、

3.4K3 0

webpack 热更新（实施同步刷新）

style-loader会把所有的样式插入到你页面的一个style tag中。...附注： css加载不出来的时候或者报错的时候（ERROR Module not found: Error: Cannot resolve module ‘style’ in D:\workspace\HBuilder...- 只要你按照命令安装，即可实现，接下来我附加上我的实现代码：需要几个文件： 1、package.json文件在package.json文件中为scripts添加,方便使用命令: 最终package.json...-g //-g的意思是安装全局的webpack,但是我们实际的开发中还需要针对单个的项目进行webpack安装,执行命令: 3、使用 npm init 初始化，生成 package.json 文件...执行命令： npm install webpack-dev-server --save-dev （5）在package.json文件中为scripts添加,方便使用开启服务命令: "scripts

8103 0

使用 webpack 4 和 Babel 7 构建 React 应用及如何引入 Material Design

=production webpack", 4.resolve webpack 在构建包的时候会按目录的进行文件的查找，resolve 属性中的 extensions 数组中用于配置程序可以自行补全哪些文件后缀...到目前为止，只需要 html-webpack-plugin，它告诉服务器 index.bundl.js 应该被注入到 index.html 文件中再次运行以下命令，显示会跟上一次不同： npm run...它的作用是在 node 环境中，直接运行 es2015 的代码，而不需要额外进行转码。例如我们有一个 js 文件以 es2015 的语法进行编写(如使用了箭头函数)。...还需要添加一个插件，让我们可以使用类等等。让我们在类中添加类属性，基本上，它将让我们能够使用面向对象编程方式来编写代码。...当我们刷新页面时，有一个错误 Cannot GET/dashboard。如果我们跳转到另一个页面，会得到如， Cannot GET /user错误等。

9.4K6 0

从微组件到代码共享

本文会先从复用组件，窥探到代码共享。聊一聊中后台项目在微前端的场景下，从工程化的角度下如何跨技术栈复用业务组件，再介绍一下其它的共享代码方案。...在现有的设计下，大多数这个资源都是一个已经被编译好的umd的js文件。不过在字节内部的另一个微前端框架有另外一种设计，使用的API与 federation 非常相似。...先来看看demo中的文件结构： app1 App.js（react页面入口） bootstrap.js（项目启动文件） index.js（项目入口文件） src webpack.config.js（webpack...从上面配置中中可以知道app1中使用了跑在localhost:3002上的app2模块内容。至此，在app1如何配置使用app2内容的问题就解决了。...但是在federation中它就完全不一样了，他会作为remote的加载器！

1.7K5 0

Webpack 打包 commonjs 和 esmodule 动态引入模块的产物对比

这样 Webpack 就会把 json 文件夹下所有的 .json 文件进行打包。主函数 index.js 来调用 hello 方法。...__webpack_require__.o(map, req)) { var e = new Error("Cannot find module '" + req...image-20220503191214724 打包文件中除了 main.js ，把两个 json 文件也单拎了出来，如下图： image-20220503214502914 打包产物中除了 Webpack...整体思路是通过 JSONP 的形式发送请求加载我们的 JSON 文件，同时把整个的加载过程会包装为一个 Promise ，加载完成将内容保存到 __webpack_modules__ 中。...import() 是异步的，需要异步加载的文件提前单独生成文件，然后通过 JSONP 的形式进行加载，加载完毕后通过回调将数据添加到 __webpack_modules__ 对象中，方便后续使用。

8552 0

趁webpack5还没出，先升级成webpack4吧

默认的提取公共模块机制可能会产生意外的结果，尽量取消默认后再自定义在多页面应用中，假设某个页面的css文件重写了样式，就有可能使这个重写流入到公共样式中，在另一个页面被引用而导致布局出错。...在win10上看比较醒目直观，但在win7上仅是状态栏的气泡弹出不过在编译结果的内容提示还不够完善，可以改进 8. webpack-dev-server的端口自动获取空闲端口，多webpack项目共存时很方便...但项目的webpack配置是直接 module.export一个配置项的，不是使用NodeJS API的方式，尝试切换为这种方式时发现竟然与HMR不同兼容，就此作罢尝试寻找同步直接获取空闲端口的办法，...引入 dllplugin动态链接库方案，将第三方库单独打包，再链入我们的webpack项目中可以参考介篇文章新建一个webpack.dll.config.js配置文件 let path = require.../dll/', 'vendor.manifest.json')), }), 使用 add-asset-html-webpack-plugin 这个插件将vendor库插入到页面中需要注意的是

1.6K3 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭