javascript - 使用 webpack 4(和 webpack-dev-server)将 css 注入多个 html 文件
问题描述
我已经在生产中将我的 css 和 js 注入到 dist/index.html 和 dist/jobs.html 中,但它似乎只在使用 webpack-dev-server 时将 css 注入到 index.html
我正在尝试使用此处和 HtmlWebpackPlugin文档中提到的 HtmlWebpackPlugin() 的多个实例
这是我的 webpack.dev.js 文件,我遇到了("start": "webpack-dev-server --config webpack.dev.js --hot --open chrome"
)问题:
module.exports = merge(common, {
mode: "development",
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'js/bundle.js'
},
module: {
rules: [
{
test: /\.scss$/,
use: ['style-loader', 'css-loader', 'sass-loader']
}
]
},
});
和常见的:
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/js/app.js',
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
},
{
test: /\.html$/,
use: ["html-loader"]
},
{
test: /\.(png|jpeg|jpg|gif)$/,
use: {
loader: 'file-loader',
options: {
name: '[name].[hash:5].[ext]',
outputPath: './images/'
}
}
},
{
test: /\.svg$/,
use: {
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: './svg/'
}
}
}
]
},
plugins: [
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'src/index.html'
}),
new HtmlWebpackPlugin({
filename: 'jobs.html',
template: 'src/jobs.html'
}),
]
};
谁能看到我可能缺少的东西?有没有一种简单的方法可以让我检查可能出了什么问题?我对 webpack 很陌生。谢谢
*编辑:
网页包输出:
Version: webpack 4.42.1
Time: 3463ms
Built at: 2020-04-24 02:24:08
Asset Size Chunks Chunk Names
images/atlassian-logo.31125.png 6.75 KiB [emitted]
images/dropbox-logo.7ce30.png 3.52 KiB [emitted]
images/legal.5f3dd.png 4.82 KiB [emitted]
images/logitech-logo.f75ce.png 3.67 KiB [emitted]
index.html 14.7 KiB [emitted]
jobs.html 1.86 KiB [emitted]
js/bundle.js 684 KiB main [emitted] main
svg/spritesheet.svg 12.8 KiB [emitted]
Entrypoint main = js/bundle.js
[0] multi (webpack)-dev-server/client?http://localhost:8081 (webpack)/hot/dev-server.js ./src/js/app.js 52 bytes {main} [built]
[./node_modules/core-js/modules/es.array.concat.js] 2.34 KiB {main} [built]
[./node_modules/core-js/modules/es.object.define-property.js] 403 bytes {main} [built]
[./node_modules/lodash.debounce/index.js] 10.5 KiB {main} [built]
[./node_modules/strip-ansi/index.js] 161 bytes {main} [built]
[./node_modules/webpack-dev-server/client/index.js?http://localhost:8081] (webpack)-dev-server/client?http://localhost:8081 4.29 KiB {main} [built]
[./node_modules/webpack-dev-server/client/overlay.js] (webpack)-dev-server/client/overlay.js 3.51 KiB {main} [built]
[./node_modules/webpack-dev-server/client/socket.js] (webpack)-dev-server/client/socket.js 1.53 KiB {main} [built]
[./node_modules/webpack-dev-server/client/utils/createSocketUrl.js] (webpack)-dev-server/client/utils/createSocketUrl.js 2.91 KiB {main} [built]
[./node_modules/webpack-dev-server/client/utils/log.js] (webpack)-dev-server/client/utils/log.js 964 bytes {main} [built]
[./node_modules/webpack-dev-server/client/utils/reloadApp.js] (webpack)-dev-server/client/utils/reloadApp.js 1.59 KiB {main} [built]
[./node_modules/webpack-dev-server/client/utils/sendMessage.js] (webpack)-dev-server/client/utils/sendMessage.js 402 bytes {main} [built]
[./node_modules/webpack/hot sync ^\.\/log$] (webpack)/hot sync nonrecursive ^\.\/log$ 170 bytes {main} [built]
[./node_modules/webpack/hot/dev-server.js] (webpack)/hot/dev-server.js 1.59 KiB {main} [built]
[./src/js/app.js] 6.22 KiB {main} [built]
+ 159 hidden modules
Child html-webpack-plugin for "index.html":
Asset Size Chunks Chunk Names
images/atlassian-logo.31125.png 6.75 KiB [emitted]
images/dropbox-logo.7ce30.png 3.52 KiB [emitted]
images/legal.5f3dd.png 4.82 KiB [emitted]
images/logitech-logo.f75ce.png 3.67 KiB [emitted]
+ 1 hidden asset
Entrypoint undefined = index.html
[./node_modules/html-loader/dist/runtime/getUrl.js] 548 bytes {0} [built]
[./node_modules/html-webpack-plugin/lib/loader.js!./src/index.html] 16.5 KiB {0} [built]
[./src/assets/company-logos/atlassian-logo.png] 75 bytes {0} [built]
[./src/assets/company-logos/dropbox-logo.png] 73 bytes {0} [built]
[./src/assets/company-logos/logitech-logo.png] 74 bytes {0} [built]
[./src/assets/legal.png] 66 bytes {0} [built]
Child html-webpack-plugin for "jobs.html":
1 asset
Entrypoint undefined = jobs.html
[./node_modules/html-webpack-plugin/lib/loader.js!./src/jobs.html] 2 KiB {0} [built]
i 「wdm」: Compiled successfully.
为了比较,这里是我的 webpack.prod.js 配置,它将 css 和 js 插入到所有文件中("build": "webpack --config webpack.prod.js"
)
module.exports = merge(common, {
mode: "production",
output: {
filename: 'js/bundle.js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
{
test: /\.scss$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
'sass-loader'
]
}
]
},
plugins: [
new MiniCssExtractPlugin({
filename: '[name].[contentHash].css'
}),
new CleanWebpackPlugin({
cleanOnceBeforeBuildPatterns: ['./js/*', './svg/*', './*.css', './images/*']
})
]
});
解决方案
你这里有错误
plugins: [
new HtmlWebpackPlugin({
filename: './index.html',
template: './src/index.html'
}),
new HtmlWebpackPlugin({
filename: './jobs.html',
template: './src/jobs.html'
}),
]
文件名不应该是相对的,而是filename: 'index.html'
使用filename: 'jobs.html'
推荐阅读
- javascript - 从 PerformanceEntry API 估计带宽
- android - 是否可以手动让新的 ImageDecoder 类一帧一帧地返回位图?
- javascript - 如何从 connect-flash 修复 div,它们始终处于活动状态(我正在使用哈巴狗)?
- javascript - 使用 React Hooks 时 TypeError dispatcher.useState 不是函数
- swift - Xcode CUI 目录错误
- c# - 在动态crm中将销售订单详细信息添加到销售订单
- python - sklearn:垃圾箱必须单调递增或递减
- javascript - 如何在节点应用程序中指定环境变量?
- javascript - 带有 fs 和 setInterval 的节点 js
- css - 将 prop 传递给样式化组件中的嵌套元素