У меня есть папка сборки, содержащая - Bundle.js, Bundle.css и index.html. Файл index.html содержит [*] и .
Я пытаюсь встройте Bundle.js и Bundle.css в index.html с помощью веб-пакета. Я столкнулся с двумя проблемами:
- Файл JS встраивается, но в index.html все еще есть скрипт src="bundle.js"
CSS вообще не встраивается и не отображается в папке dist
Internal site
webpack.config.js
const path = require('path');
const HTMLWebpackPlugin = require('html-webpack-plugin');
const HtmlInlineCSSWebpackPlugin = require('html-inline-css-webpack-plugin').default;
const HtmlInlineScriptWebpackPlugin = require('html-inline-script-webpack-plugin');
module.exports = {
context: path.resolve(__dirname, './internal_site/public/'),
entry: {
main: './bundle.js', // Entry JavaScript file
},
output: {
filename: '[name].js', // Output JS bundle
path: path.resolve(__dirname, 'dist'), // Output directory
clean: true, // Clean output directory before build
},
module: {
rules: [
{
test: /\.css$/, // Match CSS files
use: [
'style-loader', // Extract CSS into separate files
'css-loader', // Resolve CSS imports
],
},
],
},
plugins: [
new HTMLWebpackPlugin({
template: './index.html', // Path to your index.html
inject: 'body', // Inject scripts into the body
minify: {
collapseWhitespace: true, // Minify HTML
removeComments: true, // Remove comments
},
}),
new HtmlInlineCSSWebpackPlugin(), // Inline CSS into tags
new HtmlInlineScriptWebpackPlugin(), // Inline JavaScript into tags
],
optimization: {
minimize: true,
minimizer: [
new (require('terser-webpack-plugin'))({
extractComments: false, // Remove comments
}),
],
},
mode: 'production',
};
Версии:
"webpack": "^5.97.1",
"webpack-cli": "^6.0.1"
Подробнее здесь: https://stackoverflow.com/questions/793 ... ng-webpack
Мобильная версия