i'm working in little project, i use webpack for generate the bundle packs of my js and css code all is fine, but i trying to do a web component that import the css style
i read here that i can use a common <link rel="stylesheet" href="yourcss1.css"> inside of template for import the style but the problem with that is when webpack build the bundles can move the css file to dist folder,
how can i configure webpack for read the css file nested in template and move to dist folder.
here my config 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$/,
loader: "handlebars-loader"
},
{
test: /\.scss$/,
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$/i,
use: [{
loader: 'file-loader',
options: {
context: '',
name: '[hash]-[name].[ext]',
outputPath: './img',
publicPath: '/img'
}
}]
}
]
},
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;
MagicTable.hbs
<link type="text/css" rel="stylesheet" href="MagicTable.scss">
<div id="message-table" class="table">
<div class="table-header">
<div class="row">
<div class="column col-email"><a href="#">Email</a></div>
<div class="column col-message"><a href="#">Message</a></div>
<!--<div class="column col-actions"><a href="#">Actions</a></div>-->
<div class="column col-status"><a href="#">Estatus</a></div>
</div>
</div>
<div class="table-content">
<div class="row js-message-row">
<div class="column col-email"><p>a@gmail.com</p></div>
<div class="column col-message"><p>I want to play...</p></div>
<!--<div class="column col-actions"> </div>-->
<div class="column col-status"><span class="status-circle circle-green"></span>
<p class="green-text">Accepted</p></div>
</div>
<div class="row js-message-row">
<div class="column col-email"><p>a@gmail.com</p></div>
<div class="column col-message"><p>ASASFARGA</p></div>
<!--<div class="column col-actions"> </div>-->
<div class="column col-status"><span class="status-circle circle-red"></span>
<p class="red-text">Rejected</p></div>
</div>
<div class="row js-message-row">
<div class="column col-email"><p>a@gmail.com</p></div>
<div class="column col-message"><p>ASASFARGA</p></div>
<div class="column col-status"><span class="status-circle circle-orange"></span>
<p class="orange-text">Pending</p></div>
</div>
</div>
</div>
MagicTable.js
import template from './MagicTable.hbs';
class MagicTable extends HTMLElement {
constructor() {
super();
let shadowRoot = this.attachShadow({mode: 'open'});
shadowRoot.innerHTML = template({});
}
}
//export default MagicTable
customElements.define('magic-table', MagicTable);
For process <link rel="stylesheet" href="src/compontent/componentA.css"> nested in the component template and translate to <link rel="stylesheet" href="css/componentA.css">, just need to add these loader after 'handlerbars-loader' that was excract the css files for process.
{
test: /\.hbs$/,
use: [
{
loader: "handlebars-loader",
},
{
loader: 'extract-loader'
},
{
loader: 'html-loader',
options: {
attrs: ["img:src", "link:href"],
}
}]
}
now for process css link you need to add :
{
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'
},
],
},
here complete 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;