webpack-服务不服务捆绑包文件(404s)
webpack-服务不服务捆绑包文件(404s)
提问于 2018-04-30 23:52:46
webpack.config.js
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'
}
}
}目录结构
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标志时，我得到了这个错误，服务器不会启动。
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解决了捆绑，所有的功能，如热重新加载，就像一个魔咒。
回答 2
Stack Overflow用户
发布于 2018-05-20 15:17:06
我刚从使用webpack-dev-server转到了webpack-serve，这有点麻烦；文档非常缺乏。
看起来webpack-serve目前在v1.0.2上，所以在继续之前请尝试升级。您还需要设置一个配置文件来指定所需的内容(请参阅文档here)。下面是我的serve.config.js文件：
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启动脚本。
Stack Overflow用户
发布于 2018-07-14 09:58:39
使用devMiddleware选项：
module.exports = {
...
serve: {
devMiddleware: {
publicPath: '/dist/',
},
},页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50104039
复制相关文章
相似问题
腾讯云开发者
