问题描述:
在 安装了 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://loc
发布评论