如何使用 webpack 将 css 和 js 内联到 html 中并删除未使用的样式 [英] How to use webpack to inline css and js into html and remove unused styles
问题描述
我有一个 HTML 文件和一些 SASS 和 JS,对于生产,我想将它们捆绑成一个 HTML 文件,其中包含编译成 CSS 的 SASS 成一个内联 <style>
元素,并且 JS 组合并缩小为内联 元素.不是,将 css 嵌入到 JS 中并通过 JS 或在单独的文件中添加到 DOM.
I have a single HTML file and some SASS and JS, and for Production I want to bundle these together into a single HTML file which contains the SASS compiled into CSS into an inline <style>
element, and the JS combined and minified into an inline <script>
element. Not, where the css is embedded in the JS and added to the DOM via JS or in separate files.
我已经把 SASS 编译成 .css
和 <link
ed to 和 JS 到 <script src="
ed .js
.我也有 PurgeCss 工作(我认为 - 它剥离了很多可能未使用的选择器).
I've got as far as getting the SASS compiled into .css
and <link
ed to and the JS into a <script src="
ed .js
. I've also got PurgeCss working (I think - it's stripping a lot of probably unused selectors).
如何将 CSS 和 JS 内联到 HTML 中它们自己的标签中?
How do I inline the CSS and JS in their own tags inside the HTML?
请不要只说使用 https://www.npmjs.com/package/html-inline-css-webpack-plugin 或参考 使用 webpack 内联 JavaScript 和 CSS,因为这似乎受到错误和版本/依赖项不匹配的困扰.如果这是最佳答案,那么您实际上是如何使其发挥作用的?哪些版本的所有依赖项实际上可以协同工作?
Please don't just say to use https://www.npmjs.com/package/html-inline-css-webpack-plugin or reference Inline JavaScript and CSS with webpack, because this seems to be plagued with errors and version/dependency mismatches. If this is the best answer, how do you actually make it work? What versions of all the dependencies actually work together?
这是我的 webpack.config
就我所知:
Here is my webpack.config
which works as far as I've got:
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"
推荐答案
过去几周我一直在玩 Webpack.
I've been playing around with Webpack for the last couple of weeks.
我还是个新的 Webpack,但有一个 HTML 模板项目,我一直在使用它,这可能会有所帮助:https://github.com/JustAGuyCoding/spotlight-webpack,特别是因为它是一个工作示例.
I'm still fairly new Webpack, but have a side HTML template project where I've been using it which may help: https://github.com/JustAGuyCoding/spotlight-webpack, especially since it's a working example.
webpack 配置如下:
The webpack config looks like this:
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-Internalise\Inline - uses StyleExtHtmlWebpackPlugin*/
{
test: /\.s[ac]ss$/i,
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {
},
},
'css-loader',
'sass-loader',
],
},
],
},
};
这篇关于如何使用 webpack 将 css 和 js 内联到 html 中并删除未使用的样式的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!