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
解决了捆绑,所有的功能,如热重新加载,就像一个魔咒。
发布于 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启动脚本。
发布于 2018-07-14 09:58:39
使用devMiddleware
选项:
module.exports = {
...
serve: {
devMiddleware: {
publicPath: '/dist/',
},
},
https://stackoverflow.com/questions/50104039
复制相似问题