问题描述：

在安装了 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自动打包功能，报错 Content not from webpack is served from ‘ ‘ 且访问http://localhost:8080/ 为空问题】相关推荐

webpack自动打包功能配置
当我们在js中修改后,在浏览器打开html文件并没有任何变化,这是因为引入的js文件是之前打包的js文件,如果要实现修改后的js有变化,需要在重新打包一次,这样就大大的增加了我们的工作量,所以这儿就用 ...
webpack 的基本使用——配置打包的入口与出口||配置 webpack 的自动打包功能
配置打包的入口与出口 const path = require('path') // 导入 node.js 中专门操作路径的模块 module.exports = { entry: path.join ...
vue cli 项目在打包时候报错解决方法
问题描述报错一: 打包过程报错:Unexpected token name <i>, expected punc <;> IE浏览中报错:SCRIPT1003: 缺少':', ...
VSCode内npm run build编译打包时候报错：code ELIFECYCLE - （已解决）
文章目录 win10系统使用VSCode打包项目进行build编译的时候,报错:Module build failed: Error: "extract-text-webpack-plugi ...
maven打包maven-shade-plugin报错Non-parseable POM解决方法
maven打包maven-shade-plugin报错Non-parseable POM解决方法参考文章: (1)maven打包maven-shade-plugin报错Non-parseable P ...
（解决）除非另外还指定了 TOP、OFFSET 或 FOR XML，否则，ORDER BY 子句在视图、内联函数、派生表、子查询和公用表表达式中无效Mybatis-plus 默认分页功能报错
(解决)除非另外还指定了 TOP.OFFSET 或 FOR XML,否则,ORDER BY 子句在视图.内联函数.派生表.子查询和公用表表达式中无效Mybatis-plus 默认分页功能报错我百度了 ...
uglifyjs报错 webpack_vue 解决uglifyjs-webpack-plugin打包出现报错的问题
楼主最新对已做项目进行打包优化,配置了打包环境下去除console.log语句插件---使用uglifyjs-webpack-plugin 具体代码如下 npm install uglifyjs-we ...
python打包工具报错_Python打包发布神器—Pyinstaller
一前言在windows平台学习python的过程中,你肯定会遇到需要把.py脚本打包成.exe的情形,如此,至少有两方面的好处:第一,你的代码保密性更好,其他人不能直接看到python代码:第二,打 ...
vue cli 项目在打包时候报错 API fatal error handler returned after process out of memory
问题描述 vue cli 项目在打包时候报错:API fatal error handler returned after process out of memory. 问题分析从给出的提示可以看出 ...
【Hbuilder】Hbuilder 原生App-云打包，报错需要打包校验
文章目录一.前言二.报错截图三.解决: 一.前言使用Hbuild uni-app开发完项目后,安装完App云打包,点击发行>原生App云打包,报错提示打包校验二.报错截图三.解决: ...

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

问题描述：

访问结果：

查看报错提示：

解决方案：

再次访问测试：

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

最新文章

热门文章

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

问题描述：

访问结果：

查看报错提示：

解决方案：

再次访问测试：

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

最新文章

热门文章

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

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