webpack - html-webpack-plugin 不能与 webpack-dev-server 一起使用
问题描述
Webpack,你会是我的死因。
html-webpack-plugin 在生产环境中运行良好。'dist' 文件夹加载了我的 html 模板和插入的包。嗯不错。
然而,webpack-dev-server 并没有这样做。它似乎正在创建名为“Webpack App”的 OWN html 页面并提供服务。 这到底是从哪里来的? 我需要在开发和产品方面保持一致,这样我才能看到发生了什么。我正在使用 webpack-merge 合并不同的配置。
- 网络包:4.29.6
- webpack-cli:3.3.0
- 网络包开发服务器:3.2.1
- html-webpack-loader: 0.0.5,
- html-webpack-插件:3.0.7
webpack.common
module.exports = {
entry: [
"react-hot-loader/patch",
resolve("src", "entry.js")
],
output: {
filename: "bundle.js",
path: resolve('dist'),
publicPath: "/"
},
module: {
rules: [
{
test: /\.js$/,
exclude: [resolve(__dirname, 'node_modules')],
use: [{ loader: 'babel-loader'}]
},
{
test: /\.s(a|c)ss$/,
use: [{
loader: 'style-loader'
}, {
loader: 'css-loader'
}, {
loader: 'sass-loader'
}]
}
]
},
resolve: {
extensions: [".js", "jsx"],
alias: {
actions: resolve(__dirname, 'src', 'actions'),
components: resolve(__dirname, 'src', 'components'),
lib: resolve(__dirname, 'src', 'lib'),
routes: resolve(__dirname, 'src', 'routes'),
store: resolve(__dirname, 'src', 'store'),
styles: resolve(__dirname, 'src', 'styles'),
test: resolve(__dirname, 'src', 'test'),
},
modules: [
resolve(__dirname, 'node_modules'),
resolve(__dirname, 'src')
]
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new HtmlWebpackPlugin({
"template": resolve(__dirname, "src", "index.html"),
"filename": resolve(__dirname, "dist", "index.html"),
"hash": true,
"inject": true,
"compile": true,
"favicon": false,
"minify": true,
"cache": true,
"showErrors": true,
"chunks": "all",
"excludeChunks": [],
"title": "React Starter",
"xhtml": true,
"chunksSortMode": 'none' //fixes bug
}),
new CleanWebpackPlugin(['dist'])
]
}
webpack.dev
module.exports = merge(common, {
devtool: "eval-source-map",
mode: 'development',
devServer: {
host: 'localhost',
port: 3000,
open: true
}
});
解决方案
Webpack 开发服务器不会将文件写入 dist 文件夹,它会从内存中提供包。但是,如果您使用 contentBase 选项(默认为您当前的工作目录),它将从磁盘提供这些文件。内存文件优先于 contentBase 文件。
推荐阅读
- python - 从 PyCharm 中的 PYTHONPATH 中删除路径无法正常工作?
- swift - 循环遍历数组的范围
- c# - 使用 AudioConfig 和 PushAudioOutputStreamCallback 时,SpeakTextAsync 抛出异常“在垃圾收集委托上进行了回调”
- java - 如何在 Eclipse 上恢复已删除的项目?
- http - CORS Cookie 未保存在浏览器中
- javascript - Puppeteer:正确选择内部文本
- java - 试图阻止 ArrayList 在方法调用上加倍
- ios - UIAlertController 上的 UITapGestureRecognizer 未触发
- python - 将 pydoc HTML 集成到 Jupyter 中,忽略样式
- java - 与 Mono 一起使用 then 时出现意外行为