如何使用webpack将css和js内联到html中，并删除未使用的样式

Question

我有一个单独的HTML文件和一些SASS和JS，对于Production，我想将它们捆绑在一起，形成一个单一的HTML文件，其中包含将SASS编译为CSS的内联<style>元素，JS组合并缩小为内联<script>元素。不是，css嵌入在JS中，并通过JS或单独的文件添加到DOM中。

我已经把SASS编译成了.css和<link，把JS编译成了一个<script src="和.js。我还让PurgePass工作(我认为它剥离了很多可能未使用的选择器(。

如何将CSS和JS内联到HTML中它们自己的标记中？

请不要只是说使用https://www.npmjs.com/package/html-inline-css-webpack-plugin或者使用webpack引用内联JavaScript和CSS，因为这似乎充满了错误和版本/依赖性不匹配。如果这是最好的答案，你实际上是如何让它发挥作用的？所有依赖关系的哪些版本实际上可以协同工作？

这是我的webpack.config，据我所知它是有效的：

const HtmlWebpackPlugin = require('html-webpack-plugin');
const PurgecssPlugin = require('purgecss-webpack-plugin')
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const path = require("path");
const glob = require('glob');
const purgecssFromHtml = require('purgecss-from-html');
const PATHS = {
src: path.join(__dirname, 'src')
}
module.exports = {
module: {
rules: [
{
test: /.scss$/i,
use: [

MiniCssExtractPlugin.loader,
//'style-loader',
{
loader: 'css-loader',
options: {
//importLoaders: 1,
url: false
},
},
'sass-loader',
],
},
{
test: /.js$/,
exclude: /node_modules/,
use: ["babel-loader"]
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: path.resolve(__dirname, "src", "index.html")
}),
new MiniCssExtractPlugin({
filename: "[name].css"
}),
new PurgecssPlugin({
paths: glob.sync(`${PATHS.src}/*.*`),
styleExtensions: ['.css'],
whitelist: ['whitelisted'],
extractors: [
{
extractor: purgecssFromHtml,
extensions: ['html']
}
]
})
]
};

src/index.js:

import "./scss/theme.scss";
import "./file1.js"
import "./file2.js"

Answer 1

过去几周我一直在玩Webpack。

我还是一个相当新的Webpack，但有一个附带的HTML模板项目，我一直在使用它，这可能会有所帮助：https://github.com/JustAGuyCoding/spotlight-webpack，尤其是因为这是一个有效的例子。

webpack配置如下：

const path                      = require('path');
const HtmlWebpackPlugin         = require('html-webpack-plugin');
const { CleanWebpackPlugin }    = require('clean-webpack-plugin');
const MiniCssExtractPlugin      = require('mini-css-extract-plugin');
const StyleExtHtmlWebpackPlugin = require("style-ext-html-webpack-plugin");
const CopyPlugin                = require('copy-webpack-plugin');
module.exports = {
entry: './src/spotlight.js',
output: {
path        : path.resolve(__dirname, 'dist'),
filename    : 'spotlight.[contenthash].js',
},
/* Development - webmode. */
// devtool: 'inline-source-map',
// devServer: {
//     contentBase: './dist',
// },
plugins: [
new CleanWebpackPlugin({
dry     : false,
verbose : true,
}),
new HtmlWebpackPlugin({
title           : 'Spotlight',
filename        : 'index.html',
template        : './src/spotlight.html',
scriptLoading   : 'defer',
inject          : false,
/* Prevent automatic insertion of CSS link tag, as it will inlined, but specify postiion  of bundled.js in the lodash template. */
/* _Lodash template params. */
static: false
}),
new MiniCssExtractPlugin({
filename        : 'spotlight.css',
chunkFilename   : '[id].css',
}),
new StyleExtHtmlWebpackPlugin({
position: 'head-bottom',
minify: true
}),
new CopyPlugin({
patterns: [
{ from: './license.txt', to: '../dist/license.txt' },
{ from: './notice.txt', to: '../dist/notice.txt' },
{ from: './readme_html.md', to: '../dist/readme.md' },
],
}),
],
module: {
rules: [
/* Images - uses require(lodash template), HtmlWebpackPlugin and file-loader to pickup and process(copy to dist).  */
{
test: /.(png|svg|jpg|gif)$/,
loader: 'file-loader',
options: {
name: "images/[name].[ext]",
esModule: false
/* Fixes [object,object] appearing on spotlight.html template when require(file) processed by lodash in HtmlWebpackPlugin.*/
}
},
/* SASS-CSS-Extract-InternaliseInline - uses StyleExtHtmlWebpackPlugin*/
{
test: /.s[ac]ss$/i,
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {
},
},
'css-loader',
'sass-loader',
],
},
],
},
};