Webpack හි ඇති සැකිල්වල බහු ආකාරයේ style බන්ඩල
දැන් අප සතුව බහු ඇතුල් වීමේ ලක්ෂ්ය ඇතැයි උපකල්පනය කරමු, ඒවා තමන්ගේම බන්ඩලවලට එකතු කෙරේ. එක් එක් ඇතුල් වීමේ ලක්ෂ්යයට තමන්ගේම CSS ගොනු සම්බන්ඩ කර ඇතැයි උපකල්පනය කරමු. ඔබ දැනටමත් දන්නා පරිදි, මෙම අවස්ථාවේදී එක් එක් ඇතුල් වීමේ ලක්ෂ්යය සඳහා තමන්ගේම CSS බන්ඩලයක් ඇත. Webpack ස්වයංක්රීයව එක් එක් මෙම බන්ඩල සම්බන්ඩ කරයි.
ප්රායෝගිකව පරීක්ෂා කර බලමු. පළමු ඇතුල් වීමේ ලක්ෂ්යයට style සම්බන්ඩ කරමු:
import './styles1-1.css';
import './styles1-2.css';
දෙවන ඇතුල් වීමේ ලක්ෂ්යයට style සම්බන්ඩ කරමු:
import './styles2-1.css';
import './styles2-2.css';
සැකසුම ක්රියාත්මක කරමු:
export default {
context: path.resolve( 'src'),
entry: {
test1: './test1.js',
test2: './test2.js'
},
output: {
filename: '[name].[contenthash].js',
path: path.resolve('dist'),
},
plugins: [
new MiniCssExtractPlugin({
filename: '[name].[contenthash].css'
}),
new HtmlWebpackPlugin(),
],
module: {
rules: [
{
test: /\.css$/i,
use: [MiniCssExtractPlugin.loader, 'css-loader'],
},
],
},
};
ප්රතිඵලයක් වශයෙන්, සැකිල් ගොනුව පහත දැක්වෙන ආකෘතිය ගනී:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Webpack App</title>
<script defer src="test1.18e856b0da2f7862ab19.js"></script>
<script defer src="test2.d12ade182c2989b4efa8.js"></script>
<link href="test1.398db7afe3b52e94bb25.css" rel="stylesheet">
<link href="test2.1d12c304c284a752cb9a.css" rel="stylesheet">
</head>
<body>
</body>
</html>
ඇතුල් වීමේ ලක්ෂ්ය තුනක් සාදන්න. එක් එක් ලක්ෂ්යයට CSS ගොනු තුනක් සම්බන්ඩ කරන්න. එකතු කිරීම ක්රියාත්මක කරන්න. සියලු බන්ඩල ස්වයංක්රීයව සම්බන්ඩ වන බවට විශ්වාස කරන්න.
