所以我的问题是,当我转到 http://localhost:8080/webpack-dev-server/
时,我可以让 webpack 提供目录列表。如果我修改开发服务器路径,那么它不会对包进行任何更改。
我想要一个非常简单的设置。把所有东西都放在应用程序中,执行 js 转换,然后在 dist 中提供服务。 index.html
怎么配呢?
我有以下目录结构:
app
index.js
dist
bundle.js
index.html
webpack.config.js
在 webpack.config 里面我有这个:
const path = require('path')
module.exports = {
entry: './app/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist'),
publicPath: '.',
},
module: {
rules: [
{
test: /\.js$/,
use: 'babel-loader',
exclude: /(node_modules)/,
}
]
},
devServer: {
contentBase: path.join(__dirname, 'dist'),
compress: true,
}
}
我将其解释为“在 index.js 开始捆绑,在使用 babel-loader 转换所有 js 文件后,将名为 bundle.js
的文件放入 dist/
. 然后在开发服务器上,从 dist 文件夹提供 js 内容并压缩。”
我的脱节在于理解 index.html
如何发挥作用。
我咨询过:https://webpack.js.org/configuration/dev-server/#devserver
。
我可以将 contentBase
路径更改为 .
,它不会显示目录列表,但不会更新包。
tldr:
如何使开发服务器指向 index.html
但提供更新的 Assets ?
终于明白了。
const path = require('path')
module.exports = {
entry: './app/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist'),
},
module: {
rules: [
{
test: /\.js$/,
use: 'babel-loader',
exclude: /(node_modules)/,
}
]
},
devServer: {
contentBase: 'dist',
}
}
我喜欢说我顿悟了,但我只是不断地发送选项,直到它起作用为止。
最佳答案
如果 contentBase
是 ./dist
,那么 index.html
应该存在于该目录中。它基本上是 webpack-dev-server
将在其中查找静态文件(HTML、图像等)的目录。
它不一定与您用于 bundle 的相同; output.path
(AFAIK) 甚至没有被 webpack-dev-server
使用,因为它从内存构建和提供包。唯一需要的是 output.filename
和 output.publicPath
(虽然我相信后者对于 Webpack v2 也是可选的,但它会尝试自己确定一个公共(public)路径),用于通过 URL 确定可以请求包。
关于javascript - Webpack dev-server - 如何提供带有更新 Assets 的静态文件?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43299965/