webpack-dev-server运行出错
1、运行npm run dev 命令在cmd上面也不算报错输出一些东西看不懂什么意思。
报错页:
2、目录结构
3、webpack.config.js中代码
let path = require('path');
let webpack = require ("webpack");
let HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports={
entry:"./src/main.js",
output:{
filename:'bundle.js',
path:path.resolve('./dist')
},
module:{
rules:[
{test:/\.js$/,use:'babel-loader',exclude:/node_modules/},
{test:/\.css$/,use:['style-loader','css-loader']},//这个需要俩个是因为css-loader解析完还要以style形式插入
// 转化base64只在8192字节以下转化,其它情况输出原图片
{test:/\.(jpg|png|gif)$/,use:'url-loader?limit=8192'},
{test:/\.vue$/,use:'vue-loader'}
]
},
plugins:[
new webpack.HotModuleReplacementPlugin(),
new HtmlWebpackPlugin({
title: 'Hello World app',
template:'./src/index.html',
})
],
devServer:{
historyApiFallback:true,
inline:true,
}
}
4、package.json
{
"name": "day7",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "webpack",
"dev": "webpack-dev-server --inline"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-es2015": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
"css-loader": "^0.28.8",
"file-loader": "^1.1.6",
"html-webpack-plugin": "^2.30.1",
"less": "^2.7.3",
"less-loader": "^4.0.5",
"style-loader": "^0.19.1",
"url-loader": "^0.6.2",
"vue": "^2.5.13",
"vue-loader": "^13.7.0",
"vue-template-compiler": "^2.5.13",
"webpack": "^3.10.0",
"webpack-dev-server": "^2.10.0"
},
"devDependencies": {
"vue-router": "^3.0.1"
}
}
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
应该下载的时候加上--save-dev