[webpack] Content not from webpack is served from “xxxx“ 并且 http://localhost:8080/ 数据为空解决方案

问题过程

执行webpack自动打包脚本时，访问== http://localhost:8080/ ==数据为空

package.json

    "scripts": {"dev": "webpack-dev-server",},

webpack.config.js

const path = require('path')
module.exports = {//编译模式 两个可选值 development production// development 不会进行代码的压缩和混淆// production 会进行代码的压缩和混淆//两者打包大小不同mode: 'development',// mode: 'production'entry: path.join(__dirname, './src/index.js'),// output只支持对象形式的配置output: {path: path.join(__dirname, './dist'), //输出文件的存放路径filename: 'bundle.js' //输出文件的名称},
}

结果

在这里插入图片描述

解决方案

在webpack.config.js中添加如下代码

    devServer: {// contentBase: __dirname, -- 请注意，这种写法已弃用static: {directory: path.join(__dirname, "/"),},}

即：

const path = require('path')
module.exports = {//编译模式 两个可选值 development production// development 不会进行代码的压缩和混淆// production 会进行代码的压缩和混淆//两者打包大小不同mode: 'development',// mode: 'production'entry: path.join(__dirname, './src/index.js'),// output只支持对象形式的配置output: {path: path.join(__dirname, './dist'), //输出文件的存放路径filename: 'bundle.js' //输出文件的名称},devServer: {// contentBase: __dirname, -- 请注意，这种写法已弃用static: {directory: path.join(__dirname, "/"),},},
}

点击src到达首页

[webpack] Content not from webpack is served from “xxxx“ 并且 http://localhost:8080/ 数据为空解决方案相关推荐

Webpack是什么？Webpack有什么应用？
Webpack是什么? Webpack核心定义--Webpack是一个模块打包工具.最早的时候,Webpack是一个JS打包工具,现在Webpack功能日益强大,除了JS还可以打包CSS或者图片等多种 ...
linux怎么卸载webpack,安装webpack后，执行webpack -v命令时报错：SyntaxError: Block-sc
安装webpack后,执行webpack -v命令时报错如下: [root@FreeServer ~]# webpack -v /usr/local/node-v4.4.7-linux-x64/lib ...
webpack 3.1 升级webpack 4.0
webpack 3.1 升级webpack 4.0 为了提升打包速度以及跟上主流技术步伐,前段时间把项目的webpack 升级到4.0版本以上 webpack 官网:https://webpack.j ...
webpack搭建php服务器,webpack搭建react开发环境步骤详解
这次给大家带来webpack搭建react开发环境步骤详解,webpack搭建react开发环境的注意事项有哪些,下面就是实战案例,一起来看一下.mkdir react-redux && ...
webpack 4.0 配置文件 webpack.config.js文件的放置位置
一般webpack.config.js是默认放在根目录的,不在根目录的时候需要在package.json中制定位置,我的配置文件目录是config/webpack.config.js,在package ...
Webpack之插件html webpack plugin
Webpack之插件html webpack plugin html-webpack-plugin插件动态生成html文件并自动引入js文件静态文件无需加载js或css文件,通过设置入口文件可以将 ...
git 创建webpack项目_使用webpack手动创建一个完整项目的全过程
1.创建文件夹"webpack-study" 2.使用webstrom打开文件夹所在位置.在根目录上创建一个文件,文件命名为"src",在src文件下新建css ...
webpack笔记一：webpack的介绍，安装，加载css、图片、字体等
写在前面的话: 在当前grunt.gulp.webpack成为日常工具的情况下,如果你还只是熟练的使用html.css和激块瑞的话,已经远远不能满足项目的需求,所以你得变强,你需要懂得更多.现在前端不 ...
安装truffle的前提条件（nodejs和npm），truffle的webpack案例测试，webpack项目中的报错
truffle安装 Ubuntu20.04下truffle相关组件版本如下: Truffle v5.2.4 (core: 5.2.4) Solidity v0.5.16 (solc-js) Node ...
webpack 分离css html,webpack分离css并单独打包的方法
这篇文章主要介绍了webpack分离css单独打包的方法,内容挺不错的,现在分享给大家,也给大家做个参考. 本文介绍了webpack分离css单独打包的方法,分享给大家,具体如下: CHANGELOG ...

[webpack] Content not from webpack is served from “xxxx“ 并且 http://localhost:8080/ 数据为空解决方案

问题过程

package.json

webpack.config.js

结果

解决方案

[webpack] Content not from webpack is served from “xxxx“ 并且 http://localhost:8080/ 数据为空解决方案相关推荐

最新文章

热门文章