问题过程
执行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:808
发布评论