webpack 打包后通过引用webpack-dev-server模块后,地址栏显示一个undefined,页面能正常显示?
编译代码后,node 启动npm run dev,自动打开浏览器,能正常显示我的页面,把地址栏的undefined去掉也不影响,就是看着怪怪的,不知道怎么才能去掉呢?
var webpack = require('webpack');
var path = require('path');
var ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
devtool: 'eval-source-map',//配置生成Source Maps,选择合适的选项
entry: path.resolve(__dirname, 'src/index.js'),//已多次提及的唯一入口文件
output: {
path: path.resolve(__dirname, 'dist'),//打包后的文件存放的地方
filename: "bundle.js"//打包后输出文件的文件名
},
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': path.resolve(__dirname, 'src')
}
},
module: {
loaders: [
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
extractCSS: true
}
},
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback:"style-loader",
use:"css-loader"
})
},
{
test: /\.scss$/,
use: ExtractTextPlugin.extract({
fallback:"style-loader",
use:"scss-loader"
})
},
{
test: /\.(png|jpg|gif|woff|woff2|ttf|eot|svg)$/,
loader: 'url-loader?limite=8192' // limit 是转换base64的文件大小的阀值8兆
},
{
test: /\.html$/,
loader: 'html-loader' // 可以用来加载模板
}
],
},
plugins: [
new ExtractTextPlugin("styles.css"),
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
}
})
],
devServer: {
contentBase: path.resolve(__dirname,"dist"),//本地服务器所加载的页面所在的目录
port:8050,
open:true,
publicPath:"/",
historyApiFallback: true,//不跳转
inline: true//实时刷新
}
}
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
根据题主的
package.json
,发现有用到vue-router
,检查一下router
(相关的 hash 路由)的配置是否正确。很有可能是
vue-router
的没有正确配置导致的undefined
。