VJA*_*JAI 6 webpack html-webpack-plugin
我正在使用Webpack捆绑资源.目前,它将CSS和JS文件捆绑到一个名为bundle.js的单独文件中.如何在JS文件中嵌入JS和CSS嵌入内联？
import HtmlWebpackPlugin from 'html-webpack-plugin';
import {HotModuleReplacementPlugin} from 'webpack';
export default {
entry: {app: './test/dev'},
module: {
loaders: [
{test: /\.js/, loader: 'babel-loader', exclude: /node_modules/},
{test: /\.scss$/, loader: 'style!css!sass'}
]
},
plugins: [new HotModuleReplacementPlugin(), new HtmlWebpackPlugin()],
devtool: 'eval-source-map'
};
使用InlineChunkHtmlPlugin从反应-DEV-utils的
const HtmlWebpackPlugin = require('html-webpack-plugin');
const InlineChunkHtmlPlugin = require('react-dev-utils/InlineChunkHtmlPlugin');
module.exports = {
// ...
output: { filename: 'client-bundle.js' },
plugins: [
new HtmlWebpackPlugin(),
new InlineChunkHtmlPlugin(HtmlWebpackPlugin, [/client-bundle/]),
],
// ...
};
*其中“/client-bundle/”正则表达式应该匹配输出文件名
对于内联css，您需要额外的规则对象：
module.exports = {
entry: ['./src/style.css', './src/client.js'],
// ...
module: {
rules: [
{
test: /\.css$/i,
use: [
'style-loader', // Creates `style` nodes from JS strings
'css-loader', // Translates CSS into CommonJS
],
},
],
},
}
使用https://github.com/DustinJackson/html-webpack-inline-source-plugin
plugins: [
new HtmlWebpackPlugin({
inlineSource: '.(js|css)$' // embed all javascript and css inline
}),
new HtmlWebpackInlineSourcePlugin()
]
小智 5
对于 Webpack 5：
两者都不
InlineChunkHtmlPlugin来自react-dev-utils（由于一些模糊的错误，有些东西是undefined）也不
html-webpack-inline-source-plugin（由于Webpack 5不兼容）为我工作，所以我找到了一个不同的解决方案，仅使用html-webpack-plugin（与Webpack 5兼容）和您提供的模板的修改HtmlWebpackPlugin。
模板.html：
<!doctype html>
<html>
<head>
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<div id="root"></div>
<script defer="defer">
<% /*
The following line is a workaround for scripts that insert .js code into the generated .html file.
Because this is set here, "inject: false" is set in webpack-config.js in plugins.HtmlWebpackPlugin
*/ %>
<%= compilation.assets[webpackConfig.output.filename].source() %>
</script>
</body>
</html>
webpack-config.js：
// ...
// your other webpack-config code
//...
output: {
filename: 'bundle.js',
path: "./myOutPath",
},
plugins: [
new HtmlWebpackPlugin({
title: "My Web App",
template: "template.html",
// this is a workaround for the injection of the code from the output file into the .html
// the injection will be handled in the template file
inject: false,
})
],
在这种情况下，只有 Webpack 配置中设置的一个输出文件的内容（此处：bundle.js）被注入到 HTML 文件中。但我想你已经明白了一般的观点。
| 归档时间： |
|
| 查看次数： |
3196 次 |
| 最近记录： |