【解决使用webpack自动打包功能，报错 Content not from webpack is served from ‘ ‘ 且访问http://localhost:8080/ 为空问题】

最新推荐文章于 2023-04-15 14:24:24 发布

lt012345 最新推荐文章于 2023-04-15 14:24:24 发布阅读量1.3w

问题描述：

在安装了 webpack 的项目自动打包工具 webpack-dev-server 后，访问http://localhost:8080/ 时，出现报错：Content not from webpack is served from ’ ’ , 且页面访问不到数据。

配置代码如下：

1. package.json

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server"
2.webpack.config.js 
const path = require('path') // 导入 node.js 中操作路径的模块
// 导出一个配置对象，将来 webpack 在启动的时候，会默认查找 webpack.config.js，并读取这个文件中导出的配置对象，进行打包处理
module.exports = {
  // 编译模式  (development  production)
  mode: 'development',  // 开发模式
  // 手动指定 webpack配置打包的入口与出口
  entry: path.join(__dirname, './src/index.js'), // 打包入口文件的路
  output: {
    path: path.join(__dirname, './dist'),  // 输出文件的存放路径  
    filename: 'bundle.js' // 输出文件的名称
访问结果：
 
查看报错提示：
 
 执行：
 ① npm install webpack-dev-server -D 命令，安装项目自动打包工具
 ② npm run dev 命令，重新进行打包 
解决方案：
 
 在 webpack.config.js 中添加如下代码： 
devServer: {
    // contentBase: __dirname, -- 请注意，这种写法已弃用
    static: {
      directory: path.join(__dirname, "/"),
 添加后的webpack.config.js代码为： 
const path = require('path') // 导入 node.js 中操作路径的模块
// 导出一个配置对象，将来 webpack 在启动的时候，会默认查找 webpack.config.js，并读取这个文件中导出的配置对象，进行打包处理
module.exports = {
  // 编译模式  (development  production)
  mode: 'development',  // 开发模式
  // 手动指定 webpack配置打包的入口与出口
  entry: path.join(__dirname, './src/index.js'), // 打包入口文件的路
  output: {
    path: path.join(__dirname, './dist'),  // 输出文件的存放路径  
    filename: 'bundle.js' // 输出文件的名称
  devServer: {
    // contentBase: __dirname, -- 注意，这种写法已弃用
    static: {
      directory: path.join(__dirname, "/"),
再次访问测试：
 
 点击 src 文件夹时，可以看到打包的入口文件为 src -> index.js 

 此次，记录了 在使用 webpack 的项目自动打包工具 webpack-dev-server 时，访问不到页面的解决方案 。
我们接着前面的文章webpack源码解析二继续往下探索webpack的配置，demo的github地址：https://github.com/913453448/webpack-demo.git。
DevServer
webpack的devServer配置主要是针对webpack/**webpack-dev-server跟webpack/webpack-dev-middleware**的配置，因为webpack-dev-server依赖webpack-dev-middleware。
我们首先在我们的因
				D:\CidPlat\asdfasdfasfa>create-react-app demo7
Creating a new React app in D:\CidPlat\asdfasdfasfa\demo7.
Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts with cra-template...
yarn add v1.19.0
Project is running at ...
webpack output is served from
Content not from webpack is served from ...
404s will fallback to /
Starting the development server...
网上的说法很多，但是经笔者亲身经历之后，发现其实是电脑本身配置的问题，下面列出具体的修改方案：
1.右击我的电脑 ==>...
				webpack是一个现代JavasScript应用程序的**模块打包器,**它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。
官方网站https://www.webpackjs.com/
基本使用
webpack的两种使用方式：1命令行 2 配置文件 webpack...
模块热替换(Hot Module Replacement 或 HMR)， 也叫热更新，它是 webpack 提供的最有用的功能之一。它允许在运行时更新各种模块，而无需进行浏览器刷新或者命令行重启。
注意：热更新 HMR只能在开发环境使用，不适用于生产环境
使用webpack.config.js启用 HMR
启用该功能实际上相当简单。而我们要做的，就是更新 we...
在该篇博文中，我们将分别部署生产和开发的webpack打包编译以及项目运行环境
项目地址：https://github.com/RiversCoder/webpack-test
安装webpack-merge
cnpm install --save-dev webpack-merge
在项目主目录中新建如下几个js文件：
D:\me\...
				直接用vue-cli创建的项目可以创建一个单页面应用，开发环境和生产环境都是以一个单独的项目为目录的。但是在写一些有共性的模块时需要将所有组件放在同一个大的框架下的同时又需要每个模块可以进行单独的启动和打包。此时就需要进行个性化配置。本文将介绍两种多目录框架配置方案适用于不同情况。
pages多目录配置
这种方案需要基于vue-cli3及以上的版本。优点是快捷方便稳定，适合绝大部分的开发场景。缺点是可配置性较差。
目录格式大致如下，其实就是常见的src文件内部挪一层就行。
vue.config.
				Content not from webpack is served from XXX
原因：webpack依赖冲突
解决方法：卸载webpack  webpack-cli  webpack-dev-server
重新安装指定版本的webpack  webpack-cli  webpack-dev-server ，如下
算起来已经有3到4个项目的webpack构建打包经历。然而每次搭建起来还是有新手既视感，比较捉急。工具用法的东西，好记性不如烂笔头，有必要系统梳理下webpack的配置常用配置以及构建优化。
分为上手篇和优化篇，本篇为上手篇，先介绍常用配置。
篇幅较长，可完整阅读，也可在遇到问题时即查即用。
此次采用webpack4，也顺便尝尝鲜。
# webpack4 把命令行工具抽离成了...
				npm ERR! A complete log of this run can be found in:
npm ERR!     /home/lin/.npm/_logs/2021-05-07T15_05_18_269Z-debug.log
造成这样的原因是当你在一台电脑上编译后npm会有cache缓存，
到另外一个地方编译这个项目的缓存与原缓存不一致，
导致编译报错
需要删除项目中的
1.删掉node_modules文件夹
2.然后cnpm install 和npm run dev就可以在这台电脑运行你
				原文链接：https://blog.zfanw.com/webpack-tutorial/#webpack-dev-server 
依据原文自己实现的代码：https://github.com/fengjutian/react-init
本文基于 webpack 4，babel 7
如果你的代码不需要模块化，那么你不需要 webpack；如果你的代码需要模块化，那么你可能需要 webpack；...
					Access to XMLHttpRequest at 'http://localhost:8080/error/loginerror' from origin 'http://localhost:8
				根据提供的引用内容，你遇到了CORS（跨域资源共享）的问题。CORS是一种浏览器安全机制，用于限制跨域请求。当你的前端应用（例如Vue.js）从一个域名（例如localhost:9090）向另一个域名（例如localhost:9091）发送请求时，浏览器会执行CORS检查，以确保服务器允许该请求。
在你的情况下，你的前端应用从localhost:9090向localhost:9091发送请求，但是由于CORS策略的限制，该请求被阻止了。错误信息中提到了一个重定向（redirect）的问题，这是因为在发送实际请求之前，浏览器会发送一个预检请求（preflight request）来检查服务器是否允许该请求。由于重定向不被允许的CORS策略，预检请求被阻止了。
要解决这个问题，你可以在后端服务器上进行配置，允许跨域请求。具体的配置方法取决于你使用的后端框架和服务器。以下是一些常见的解决方法：
1. 在后端服务器上设置CORS头部：在后端服务器的响应中添加CORS头部，允许来自前端应用的跨域请求。具体的设置方法取决于你使用的后端框架和服务器。以下是一个示例代码，使用Node.js和Express框架：
```javascript
const express = require('express');
const app = express();
app.use((req, res, next) => {
  res.setHeader('Access-Control-Allow-Origin', 'http://localhost:9090');
  res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE');
  res.setHeader('Access-Control-Allow-Headers', 'Content-Type');
  next();
// 处理其他路由和请求
app.listen(9091, () => {
  console.log('Server is running on port 9091');
2. 使用代理服务器：在开发环境中，你可以使用代理服务器来绕过CORS限制。例如，你可以使用webpack-dev-server的proxy配置来将请求代理到后端服务器。具体的配置方法取决于你使用的开发工具和服务器。
3. 使用CORS插件：如果你使用的是特定的后端框架，例如Spring Boot，你可以使用相应的CORS插件来简化配置。例如，对于Spring Boot，你可以使用spring-boot-starter-web包中的CorsFilter来处理CORS问题。
请注意，为了安全起见，你应该仅允许来自受信任的域名的跨域请求，并且只允许必要的HTTP方法和头部。
				【解决使用webpack自动打包功能 ，报错 Content not from webpack is served from ‘ ‘ 且访问http://localhost:8080/ 为空 问题 】
					13964

【解决使用webpack自动打包功能 ，报错 Content not from webpack is served from ‘ ‘ 且访问http://localhost:8080/ 为空 问题 】

问题描述：

访问结果：

查看报错提示：

解决方案：

再次访问测试：

【解决使用webpack自动打包功能，报错 Content not from webpack is served from ‘ ‘ 且访问http://localhost:8080/ 为空问题】