Для процесса <link rel="stylesheet" href="src/compontent/componentA.css">, вложенного в шаблон компонента и переведенного в <link rel="stylesheet" href="css/componentA.css">, просто нужно добавить этот загрузчик после 'handlerbars-loader', который извлекал файлы css для процесса.
{
test: /\.hbs$/,
use: [
{
loader: "handlebars-loader",
},
{
loader: 'extract-loader'
},
{
loader: 'html-loader',
options: {
attrs: ["img:src", "link:href"],
}
}]
}
Теперь для ссылки на процесс css необходимо добавить:
{
test: /\.css$/,
loaders: [
{
loader: "file-loader",
options: {
name: "css/[name].css?v=[hash]".toLocaleLowerCase(),
},
},
{
loader: "extract-loader",
options: {
publicPath: "../css",
}
},
{
loader: "css-loader",
},
{
loader: 'sass-loader'
},
],
},
здесь завершено webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const webpackConfig = {
entry: {
home: ['@babel/polyfill', './src/js/home/home.js', './src/sass/home/home.scss'],
signup: ['@babel/polyfill', './src/js/signup/signup.js', './src/sass/signup/signup.scss'],
me: ['@babel/polyfill', './src/js/me/me.js', './src/sass/me/me.scss']
},
devtool: 'source-map',
output: {
path: __dirname + '/dist',
filename: 'js/[name].bundle.js?v=[hash]',
},
mode: 'development',
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env'],
plugins: ['@babel/plugin-proposal-class-properties', '@babel/plugin-transform-react-jsx']
}
}
},
{
test: /\.html$/,
use: ['html-loader'],
},
{
test: /\.hbs$/,
use: [
{
loader: "handlebars-loader",
},
{
loader: 'extract-loader'
},
{
loader: 'html-loader',
options: {
attrs: ["img:src", "link:href"],
}
}]
},
{
test: /\.scss$/,
exclude: /components/,
use: [
'to-string-loader',
MiniCssExtractPlugin.loader,
'css-loader',
'sass-loader',
]
},
{
test: /\.(gif|png|jpe?g|svg)$/i,
use: [{
loader: 'file-loader',
options: {
context: '',
name: '[hash]-[name].[ext]',
outputPath: './img',
publicPath: '/img'
}
}]
},
{
test: /\.css$/,
loaders: [
{
loader: "file-loader",
options: {
name: "css/[name].css?v=[hash]".toLocaleLowerCase(),
},
},
{
loader: "extract-loader",
options: {
publicPath: "../css",
}
},
{
loader: "css-loader",
},
{
loader: 'sass-loader'
},
],
},
]
},
plugins: [
new MiniCssExtractPlugin({
filename: "css/[name].css?v=[hash]",
chunkFilename: "[id].css"
}),
new CleanWebpackPlugin('./dist/')
],
resolve: {
modules: [
path.resolve('./'),
path.resolve('./node_modules'),
]
},
watch: process.env.NODE_ENV !== 'production',
optimization: {
splitChunks: {
cacheGroups: {
commons: {
test: /[\\/]node_modules[\\/]/,
name: "vendor",
chunks: "initial"
}
}
}
},
devServer: {
// Display only errors to reduce the amount of output.
stats: "errors-only",
compress: true,
contentBase: path.join(__dirname, 'dist'),
host: process.env.HOST, // Defaults to `localhost`
port: process.env.PORT, // Defaults to 8080
open: 'http://localhost:8080/home.html', // Open the page in browser
},
};
Object.keys(webpackConfig.entry).forEach((file) => {
webpackConfig.plugins.push(
new HtmlWebpackPlugin({
filename: `${file}.html`,
template: `src/template/${file}.html`,
chunks: ['vendor', file.replace(/-(\w)/g, (match, c) => c.toUpperCase())]
})
);
});
module.exports = webpackConfig;