মিনি-সিএসএস-এক্সট্র্যাক্ট প্লাগইন সহ ওয়েবপ্যাক 4 সমাধান
ওয়েবপ্যাক টিমটি এক্সট্রাক্ট টেক্সট প্লাগইনটিতে মিনি-সিএসএস-এক্সট্র্যাক্ট ব্যবহার করার পরামর্শ দেয়
এই সমাধানটি আপনাকে কেবল আপনার সিএসএস এন্ট্রি সমন্বিত একটি পৃথক অংশ তৈরি করতে দেয়:
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
function recursiveIssuer(m) {
if (m.issuer) {
return recursiveIssuer(m.issuer);
} else if (m.name) {
return m.name;
} else {
return false;
}
}
module.exports = {
entry: {
foo: path.resolve(__dirname, 'src/foo'),
bar: path.resolve(__dirname, 'src/bar'),
},
optimization: {
splitChunks: {
cacheGroups: {
fooStyles: {
name: 'foo',
test: (m, c, entry = 'foo') =>
m.constructor.name === 'CssModule' && recursiveIssuer(m) === entry,
chunks: 'all',
enforce: true,
},
barStyles: {
name: 'bar',
test: (m, c, entry = 'bar') =>
m.constructor.name === 'CssModule' && recursiveIssuer(m) === entry,
chunks: 'all',
enforce: true,
},
},
},
},
plugins: [
new MiniCssExtractPlugin({
filename: '[name].css',
}),
],
module: {
rules: [
{
test: /\.css$/,
use: [MiniCssExtractPlugin.loader, 'css-loader'],
},
],
},
};
আমার ব্যক্তিগত প্রকল্পগুলির মধ্যে একটির মাল্টিপল এন্ট্রি ব্যবহার করে এখানে আরও স্বল্পতর উদাহরণ রয়েছে:
const ManifestPlugin = require('webpack-manifest-plugin')
const webpack = require('webpack')
const path = require('path')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const VENDOR = path.join(__dirname, 'node_modules')
const LOCAL_JS = path.join(__dirname, 'app/assets/js')
const LOCAL_SCSS = path.join(__dirname, 'app/assets/scss')
const BUILD_DIR = path.join(__dirname, 'public/dist')
const EXTERNAL = path.join(__dirname, 'public/external')
function recursiveIssuer(m) {
if (m.issuer) {
return recursiveIssuer(m.issuer);
} else if (m.name) {
return m.name;
} else {
return false;
}
}
module.exports = {
entry: {
vendor: [
`${VENDOR}/jquery/dist/jquery.js`,
`${VENDOR}/codemirror/lib/codemirror.js`,
`${VENDOR}/codemirror/mode/javascript/javascript.js`,
`${VENDOR}/codemirror/mode/yaml/yaml.js`,
`${VENDOR}/zeroclipboard/dist/ZeroClipboard.js`,
],
app: [
`${LOCAL_JS}/utils.js`,
`${LOCAL_JS}/editor.js`,
`${LOCAL_JS}/clipboard.js`,
`${LOCAL_JS}/fixtures.js`,
`${LOCAL_JS}/ui.js`,
`${LOCAL_JS}/data.js`,
`${LOCAL_JS}/application.js`,
`${LOCAL_JS}/google.js`
],
'appStyles': [
`${EXTERNAL}/montserrat.css`,
`${EXTERNAL}/icons.css`,
`${VENDOR}/purecss/pure-min.css`,
`${VENDOR}/purecss/grids-core-min.css`,
`${VENDOR}/purecss/grids-responsive-min.css`,
`${VENDOR}/codemirror/lib/codemirror.css`,
`${VENDOR}/codemirror/theme/monokai.css`,
]
},
optimization: {
splitChunks: {
cacheGroups: {
appStyles: {
name: 'appStyles',
test: (m, c, entry = 'appStyles') =>
m.constructor.name === 'CssModule' && recursiveIssuer(m) === entry,
chunks: 'all',
enforce: true,
},
},
},
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: [ 'script-loader'],
},
{
test: /\.(scss|css)$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
],
},
],
},
mode: 'development',
resolve: {
extensions: ['.js', '.css', '.scss']
},
output: {
path: BUILD_DIR,
filename: "[name].[chunkhash].js",
},
plugins: [
new ManifestPlugin(),
new MiniCssExtractPlugin({
filename: '[name].css'
}),
]
};
আমি বুঝতে পারি যে এই পদ্ধতিটি খুব মডুলার নয়, তবে এটি আপনাকে তৈরি করতে একটি ভিত্তি দেয় এবং এমন প্রকল্পগুলিতে ওয়েবপ্যাক গ্রহণের জন্য একটি দুর্দান্ত কৌশল যা আপনি জাভাস্ক্রিপ্ট এবং সিএসএসের সাথে আন্তঃ-মিশ্রণ করতে চান না।
এই পদ্ধতির খারাপ দিকটি হ'ল সিএসএস-লোডার এখনও একটি অতিরিক্ত জাভাস্ক্রিপ্ট ফাইল উত্পন্ন করে (আপনি এটি ব্যবহার করা চয়ন করুন বা না করুন), এটি সম্ভবত ওয়েবপ্যাক 5-এ স্থির করা হবে ।
আমি যদি জেএস-এ মিশ্রিত না করে থাকি তবে কি আমি জেএস-নন সম্পদের জন্য ওয়েবপ্যাকটি ব্যবহার করব?
আমি এর সাথে কিছু ভুল দেখছি না তবে শেষ পর্যন্ত এটি একাধিক বিল্ড সিস্টেম পরিচালনার জন্য আপনার সহনশীলতার উপর নির্ভর করে। আমার কাছে এটি ওভারকিলের মতো অনুভূত হয়, তাই আমার পছন্দটি ওয়েবপ্যাক ইকোসিস্টেমে থাকা।
উপরে বর্ণিত কৌশলগুলি সম্পর্কে আরও তথ্যের জন্য, দয়া করে দেখুন https://github.com/webpack-contrib/mini-css-extract-plugin#extracting-css-based-on-entry