webpack 打包后通过引用webpack-dev-server模块后,地址栏显示一个undefined,页面能正常显示?

发布于 2022-09-05 22:46:25 字数 2374 浏览 11 评论 0

编译代码后,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//实时刷新
  } 
}

clipboard.png

clipboard.png

clipboard.png

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

丢了幸福的猪 2022-09-12 22:46:25

根据题主的 package.json,发现有用到 vue-router,检查一下 router(相关的 hash 路由)的配置是否正确。

clipboard.png

很有可能是 vue-router 的没有正确配置导致的 undefined

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文