woocommerce/packages/js/extend-cart-checkout-block/webpack.config.js.mustache

85 lines
2.1 KiB
Plaintext

const path = require( 'path' );
const defaultConfig = require( '@wordpress/scripts/config/webpack.config' );
const WooCommerceDependencyExtractionWebpackPlugin = require( '@woocommerce/dependency-extraction-webpack-plugin' );
const MiniCssExtractPlugin = require( 'mini-css-extract-plugin' );
// Remove SASS rule from the default config so we can define our own.
const defaultRules = defaultConfig.module.rules.filter( ( rule ) => {
return String( rule.test ) !== String( /\.(sc|sa)ss$/ );
} );
module.exports = {
...defaultConfig,
entry: {
index: path.resolve(process.cwd(), 'src', 'js', 'index.js'),
'{{slug}}-checkout-newsletter-subscription-block': path.resolve(
process.cwd(),
'src',
'js',
'checkout-newsletter-subscription-block',
'index.js'
),
'{{slug}}-checkout-newsletter-subscription-block-frontend': path.resolve(
process.cwd(),
'src',
'js',
'checkout-newsletter-subscription-block',
'frontend.js'
),
},
module: {
...defaultConfig.module,
rules: [
...defaultRules,
{
test: /\.(sc|sa)ss$/,
exclude: /node_modules/,
use: [
MiniCssExtractPlugin.loader,
{ loader: 'css-loader', options: { importLoaders: 1 } },
{
loader: 'sass-loader',
options: {
sassOptions: {
includePaths: [ 'src/css' ],
},
additionalData: ( content, loaderContext ) => {
const {
resourcePath,
rootContext,
} = loaderContext;
const relativePath = path.relative(
rootContext,
resourcePath
);
if (
relativePath.startsWith( 'src/css/' )
) {
return content;
}
// Add code here to prepend to all .scss/.sass files.
return (
'@import "_colors"; ' +
content
);
},
},
},
],
},
],
},
plugins: [
...defaultConfig.plugins.filter(
( plugin ) =>
plugin.constructor.name !== 'DependencyExtractionWebpackPlugin'
),
new WooCommerceDependencyExtractionWebpackPlugin(),
new MiniCssExtractPlugin( {
filename: `[name].css`,
} ),
],
};