首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >webpack-服务不服务捆绑包文件(404s)

webpack-服务不服务捆绑包文件(404s)
EN

Stack Overflow用户
提问于 2018-04-30 23:52:46
回答 2查看 1.2K关注 0票数 3

webpack.config.js

代码语言:javascript
复制
const webpack = require('webpack');
const path = require('path');
const { VueLoaderPlugin } = require('vue-loader')


module.exports = {
  entry: path.resolve(__dirname, 'src', 'index.js'),
  mode: 'development',
  output: {
    path: path.resolve(__dirname, 'dist'),
    publicPath: '/dist/',
    filename: 'bundle.js'
  },
  devServer: {
    contentBase: path.join(__dirname, "dist"),
    historyApiFallback: true
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['css-loader']
      },
      {
        test: /\.vue$/,
        use: 'vue-loader'
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: 'babel-loader'
      },
    ],
  },
  plugins: [
    new VueLoaderPlugin()
  ],
  resolve: {
    alias: {
      'vue': 'vue/dist/vue.esm.js'
    }
  }
}

目录结构

代码语言:javascript
复制
webpack.config.js
index.html
package.json
/src
  index.js
  App.vue
  other files
/dist
  <empty>

当我在运行webpack-serve --config webpack.config.js之后打开http://localhost:8080来显示index.html文件时,我得到了一个404,该文件中有一行用于<script type="text/javascript" src="/dist/bundle.js"></script>

使用--hot标志运行它也是如此。

当我使用--dev标志时,我得到了这个错误,服务器不会启动。

代码语言:javascript
复制
TypeError: Cannot create property 'publicPath' on boolean 'true'
    at fn (/mnt/c/workspace/docker/budget/node_modules/koa-webpack/index.js:81:28)
    at Object.webpack (/mnt/c/workspace/docker/budget/node_modules/webpack-serve/lib/server.js:32:25)
    at Promise.all.then (/mnt/c/workspace/docker/budget/node_modules/webpack-serve/lib/server.js:127:24)
    at <anonymous>
    at process._tickCallback (internal/process/next_tick.js:188:7)
Error: An error was thrown while initializing koa-webpack
 TypeError: Cannot create property 'publicPath' on boolean 'true'
    at Object.webpack (/mnt/c/workspace/docker/budget/node_modules/webpack-serve/lib/server.js:43:15)
    at Promise.all.then (/mnt/c/workspace/docker/budget/node_modules/webpack-serve/lib/server.js:127:24)
    at <anonymous>
    at process._tickCallback (internal/process/next_tick.js:188:7)

我正在使用webpack-serve 0.3.1

编辑1

这就是它变得奇怪的地方。尽管有上面所有的路径和其他选项,这个http://localhost:8080/bundle.js/bundle.js解决了捆绑,所有的功能,如热重新加载,就像一个魔咒。

EN

回答 2

Stack Overflow用户

发布于 2018-05-20 15:17:06

我刚从使用webpack-dev-server转到了webpack-serve,这有点麻烦;文档非常缺乏。

看起来webpack-serve目前在v1.0.2上,所以在继续之前请尝试升级。您还需要设置一个配置文件来指定所需的内容(请参阅文档here)。下面是我的serve.config.js文件:

代码语言:javascript
复制
const path = require('path');
const history = require('connect-history-api-fallback');
const convert = require('koa-connect');    

const options = {
  content: path.join(__dirname, 'dist'),
  clipboard: false,
  add: (app, middleware) => {
    middleware.webpack();
    app.use(convert(history()));
  },
};

module.exports = options;

然后使用webpack-serve ./webpack.config.js运行您的构建。我已经将此设置为我的npm启动脚本。

票数 0
EN

Stack Overflow用户

发布于 2018-07-14 09:58:39

使用devMiddleware选项:

代码语言:javascript
复制
module.exports = {
    ...
    serve: {
        devMiddleware: {
            publicPath: '/dist/',
        },
    },
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/50104039

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档