Top 10 Examples of "extract-css-chunks-webpack-plugin in functional component" in JavaScript
Dive into secure and efficient coding practices with our curated list of the top 10 examples showcasing 'extract-css-chunks-webpack-plugin' in functional components in JavaScript. Our advanced machine learning engine meticulously scans each line of code, cross-referencing millions of open source libraries to ensure your implementation is not just functional, but also robust and secure. Elevate your React applications to new heights by mastering the art of handling side effects, API calls, and asynchronous operations with confidence and precision.
rules: [{
test: /\.js$/, // Transform all .js files required somewhere with Babel
exclude: /node_modules/,
use: 'babel-loader',
}, {
test: /\.(css|scss)$/,
include: [
// CSS modules should only be generated from css/scss files within the src directory
path.resolve(app_root, 'src'),
// Global stylesheets in the static directory do not generate modules
path.resolve(project_root, 'static'),
],
use: [
// When MiniCssExtractPlugin becomes stable and supports all options, convert if needed
ExtractCssChunks.loader,
{
loader: 'css-loader',
options: {
sourceMap: true,
modules: true,
importLoader: 1,
localIdentName: '[path][name]__[local]--[hash:base64:5]',
getLocalIdent: (loaderContext, localIdentName, localName, options) => {
// Everything that comes from our global style folder and node_modules will be in global scope
if (/styles-src|node_modules/.test(loaderContext.resourcePath)) {
return localName;
}
return getLocalIdent(loaderContext, localIdentName, localName, options);
},
},exclude: /a\.js|node_modules/,
// show a warning when there is a circular dependency
failOnError: false,
})
: null,
_IS_DEV_
? new WriteFilePlugin({
exitOnErrors: false,
log: true,
// required not to cache removed files
useHashIndex: false,
})
: null,
_IS_CLIENT_ ? new ExtractCssChunks() : null,
_IS_SERVER_ ? new webpack.optimize.LimitChunkCountPlugin({ maxChunks: 1 }) : null,
_IS_PROD_ ? new webpack.optimize.ModuleConcatenationPlugin() : null,
// "Use HashedModuleIdsPlugin to generate IDs that preserves over builds."
// @see: https://github.com/webpack/webpack.js.org/issues/652#issuecomment-273324529
_IS_PROD_ && _IS_CLIENT_ ? new webpack.HashedModuleIdsPlugin() : null,
// Extract Webpack bootstrap code with knowledge about chunks into separate cachable package.
// explicit-webpack-runtime-chunk
_IS_CLIENT_ && _IS_PROD_
? new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
minChunks: module => /node_modules/.test(module.resource),
})
: null,
// Extract Webpack bootstrap code with knowledge about chunks into separate cachable package.export default function({ stage, isNode }) {
let cssLoader = initCSSLoader()
if (stage === 'node' || isNode) {
return {
test: /\.css$/,
loader: cssLoader,
}
}
cssLoader = [
{
loader: ExtractCssChunks.loader,
options: {
hot: true,
},
},
...cssLoader,
] // seeing as it's HMR, why not :)
return {
test: /\.css$/,
loader: cssLoader,
}
}cssLoaderOptions
)
}
// When not using css modules we don't transpile on the server
if (isServer && !cssLoader.options.modules) {
return ['ignore-loader']
}
// When on the server and using css modules we transpile the css
if (isServer && cssLoader.options.modules) {
return [cssLoader, postcssLoader, ...loaders].filter(Boolean)
}
return [
!isServer && ExtractCssChunks.loader,
cssLoader,
postcssLoader,
...loaders
].filter(Boolean)
}],
},
{
exclude: /node_modules/u,
test: /\.css$/u,
use: [
mode === 'dev'
? {
loader: 'style-loader',
options: {
hmr: true,
sourceMap: true,
},
}
: {
loader: ExtractCssChunks.loader,
options: {
hot: false,
reloadAll: false,
},
},
{
loader: 'css-loader',
options: {
// eslint-disable-next-line no-magic-numbers
importLoaders: 2,
sourceMap: false,
},
},
{
loader: 'postcss-loader',
options: {sourceMap: true,
ident: 'postcss',
plugins: () => [
postcssFlexbugsFixes,
autoprefixer({
flexbox: 'no-2009',
}),
],
},
}
if (stage === 'dev') {
// Dev
loaders = [
{
loader: ExtractCssChunks.loader,
options: {
hot: true,
},
},
cssLoader,
postCssLoader,
lessLoader,
]
} else if (stage === 'node') {
// Node
// Don't extract css to file during node build process
loaders = [cssLoader, postCssLoader, lessLoader]
} else {
// Prod
// for legacy css-loader version (<2.0) we need to add "minimize" to minify css code'not ie < 9' // React doesn't support IE8 anyway
]
})
]
}
};
appConfig.module.rules.push({
test: /\.(sa|sc)ss$/,
use:
isServer ? [
cssLoader,
postCSSLoader,
sassLoader,
] : [
dev ? 'style-loader' : ExtractCssChunks.loader,
cssLoader,
postCSSLoader,
sassLoader,
],
});
if (!isServer && !dev) {
appConfig.plugins.push(
new ExtractCssChunks({
allChunks: true,
filename: dev ? '[name].module.css' : '[name]-[hash].module.css',
chunkFilename: dev ? '[id].css' : '[id]-[hash].css',
hot: dev, // if you want HMR - we try to automatically inject hot reload
orderWarning: true, // Disable to remove warnings about conflicting order between imports
reloadAll: true, // when desperation kicks in - this is a brute force HMR flag
cssModules: true, // if you use cssModules, this can help.]
} else if (stage === 'node') {
// Node
// Don't extract css to file during node build process
loaders = [cssLoader, postCssLoader, sassLoader]
} else {
// Prod
// for legacy css-loader version (<2.0) we need to add "minimize" to minify css code
// for >2.0 it is handled with https://github.com/NMFR/optimize-css-assets-webpack-plugin
const cssLoaderVersion = require('css-loader/package.json').version
if (semver.satisfies(cssLoaderVersion, '<2') === true) {
cssLoader.options.minimize = true
}
loaders = [ExtractCssChunks.loader, cssLoader, postCssLoader, sassLoader]
}
config.module.rules[0].oneOf.unshift({
test: /\.s(a|c)ss$/,
use: loaders,
})
if (
config.optimization.splitChunks &&
config.optimization.splitChunks &&
config.optimization.splitChunks.cacheGroups.styles
) {
config.optimization.splitChunks.cacheGroups.styles.test = /\.(c|sc|sa)ss$/
}
return configimportLoaders: 1,
minimize: stage === 'prod',
sourceMap: false,
},
}
if (stage === 'dev') {
// Dev
loaders = [styleLoader, cssLoader, sassLoader]
} else if (stage === 'node') {
// Node
// Don't extract css to file during node build process
loaders = [cssLoader, sassLoader]
} else {
// Prod
loaders = [ExtractCssChunks.loader, cssLoader, sassLoader]
}
config.module.rules[0].oneOf.unshift({
test: /\.s(a|c)ss$/,
use: loaders,
})
return config
},
})use: [
cacheLoader,
{
loader: "babel-loader",
options: {
...(isProduction ? productionBabelOptions : developmentBabelOptions),
babelrc: false
}
}
].filter(Boolean)
},
// Use either
{
test: postcssFiles,
use: isClient ? ExtractCssChunks.extract({
use: [
cacheLoader,
{
loader: "css-loader",
options: cssLoaderOptions
},
postCSSLoaderRule
].filter(Boolean)
}) : [
cacheLoader,
{
loader: "css-loader/locals",
options: cssLoaderOptions
},
postCSSLoaderRule
].filter(Boolean)